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>