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>

ko绑定----记录的更多相关文章

  1. moment 和ko 绑定msdate格式的日期值(静态text)

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  2. 【knockout】ko绑定click事件传多个参数,

    源:http://knockoutjs.com/documentation/event-binding.html <a href="javascript:;" class=& ...

  3. knockout 学习使用笔记-----event绑定传参ko属性

    在绑定event的时候,需要传入ViewModal 本身的属性值(其实没必要,js直接能获取到,此处为测试相关参数的传递),如果不加(),会将绑定的function传进event(至于为嘛传了个fun ...

  4. knockoutjs中使用mapping插件绑定数据列表

    使用KO绑定数据列表示例:   1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping    2.先使用ko.mapping.fromJS()将原来的 ...

  5. ZigBee绑定细节

    ZigBee中的绑定由APS层来管理,除了绑定表管理外,APS层还有组表管理.快速地址查找等服务功能.应用层不能直接调用APS层中的数据服务来传输数据,只能通过AF层封装的AD_DataRequest ...

  6. Android Framework 记录之二

    接着上次的记录,续写. 23.services文件夹 文件 描写叙述 class AlarmManagerService extends IAlarmManager.Stub { //定时管理服务 p ...

  7. ko.js学习一

    一.KO是一个MVVM框架 声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上. UI界面自动刷新 (Automatic U ...

  8. SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

  9. Knockout双向绑定

    knockout双工绑定基于 observe 模式,性能高.核心就是observable对象的定义.这个函数最后返回了一个也叫做 observable 的函数,也就是用户定义值的读写器(accesso ...

随机推荐

  1. log4j 配置详解

    参考如下两个网址,讲的很详细,先看第一个再看第二个: log4j使用介绍:http://swiftlet.net/archives/683 java日志处理组件log4j--log4j.xml配置详解 ...

  2. 让CPU的占用率听你的指挥

    此题目具有很大的想象空间,尤其是多核环境下. 详见:http://hi.baidu.com/jeschou/item/53da6df6a8d25209d99e722d

  3. asyncio标准库7 Producer/consumer

    使用asyncio.Queue import asyncio import random async def produce(queue, n): for x in range(1, n + 1): ...

  4. elasticsearch 概念

    elasticsearch 来源:https://baike.baidu.com/item/elasticsearch/3411206?fr=aladdin ElasticSearch是一个基于Luc ...

  5. mobile easyui兼容实体数据(tree插件为例)

    ORM的实体类和数据库的类是一一对应的,如果有多级的嵌套循环json返回到前台为了方便展示可以使用mobile easyui,但是mobile easyui又需要特定的属性才可以,比如id,text, ...

  6. SQL Error: 1064, SQLState: 42000 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version

    -- ::, WARN [org.hibernate.util.JDBCExceptionReporter:] - SQL Error: , SQLState: -- ::, ERROR [org.h ...

  7. 时空隧道FQ

    给你推荐一款海外网站加速工具,为科技工作者.海外归国人员.企业团队.外贸工作者提供海外上网服务,永久免费. 国外网址:https://chrome.google.com/webstore/detail ...

  8. 辨析:Object与Instance都是对象,概念上没有区别。

    Object与Instance有重要的区别:Object是客观世界中存在的实体:Instance是将Object虚拟到计算机世界的实例,它的生存方式是可运行的代码,它的生存环境是计算机中的内存资源,生 ...

  9. ROUND()和TRUNC()函数

    ROUND(number[,decimals]) 其中:number 待做截取处理的数值: decimals 指明需保留小数点后面的位数,可选项.需要注意的是,和trunc函数不同,对截取的数字要四舍 ...

  10. DBCacheServer服务升级

    前段时间完成了该服务的设计的功能,花了很多时间和经历,最终完成了一个版本,已经测试了:现在后期再次在以前的基础上,完成了一些扩展. 1.扩展了内存存储 最初版本只是采用了gauva cache进行存储 ...