knockout双重绑定

最新推荐文章于 2021-06-20 01:27:40 发布

炉边诗人

最新推荐文章于 2021-06-20 01:27:40 发布

阅读量952

点赞数 1

分类专栏： Javascript与前端框架文章标签： ko

本文链接：https://blog.csdn.net/Artisters/article/details/70233199

版权

Javascript与前端框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.绑定变量

globalData = ko.observable({item:{}});

2.绑定html

ko.applyBindings(globalData, document.getElementById('_bindDemo'));

注：这里document可以不写，则默认绑定全局

3.对数据进行赋值，达到刷新页面的效果

globalData({item:data});

注：因为定义的item为空值，这里定义了一个data为item赋值

4.对–对象–使用foreach循环

<tbody data-bind="foreach: items">
	<tr>
		<td data-bind="text: framework"></td>
		<td data-bind="text: stars"></td>
	</tr>
</tbody>

注：这里的items一般使用Ajax对其赋值，Ajax返回JSON格式数据，当作为List集合返回时，可以绑定到items

success: function(data, textStatus, jqXHR){
			globalData({items:data});
		}

5.绑定普通数组循环到html

	<!--ko foreach:item.arr-->
	<div><span>随机数：</span><span data-bind="text: $data"></span></div>
	<!--/ko-->

使用注解简写循环的方式，$index--表示索引，$data--表示具体数据

6.小demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/knockout-3.4.0.js" ></script>
	</head>
	<body>
		<input type="button" value="dian" onclick="randomAve(0.3,0.3009)" />
		<div>
			<!--ko foreach:item.arr-->
			<div><span>随机数：</span><span data-bind="text: $data"></span></div>
			<!--/ko-->
			<div><span>总和：</span><span data-bind="text: item.sum"></span></div>
			<div><span>平均值</span><span data-bind="text: item.aveNum"></span></div>	
			<div><span>误差：</span><span data-bind="text: item.errorValue"></span></div>		
		</div>
		<script type="text/javascript">
			globalData = ko.observable({item:{}});
			ko.applyBindings(globalData);
			var data = {};
			
			function randomNum(min, max){
				num = Math.floor((min + Math.random() * ( (max+0.0001) - min)) * 10000) / 10000;
				return num;
			}
			
			function averageValue(arr){
				data.sum = arr[0] + arr[1] + arr[2];
				data.aveNum = Math.floor((data.sum / data.arr.length ) * 10000) / 10000;
				return  data.aveNum;
			}
			
			function randomAve(min, max){
				data.arr = [];
				for (var i = 0; i < 3 ; i++) {
					data.arr[i] = randomNum(min, max);
				}
				data.aveNum = averageValue(data.arr);
				errorValue(min);
			}
			
			function errorValue(num){
				data.errorValue = (num - data.aveNum) / (data.aveNum * 100);
				console.log(data);
				globalData({item:data});
			}
			
		</script>
	</body>
</html>

炉边诗人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
knockout双重绑定

1.绑定变量globalData = ko.observable({item:{}});2.绑定htmlko.applyBindings(globalData, document.getElementById('_bindDemo'));注：这里document可以不写，则默认绑定全局3.对数据进行赋值，达到刷新页面的效果globalData({item:data});注：因为定义的item为空值
复制链接

扫一扫