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. 使用命令行执行.sql文件

    用微软自带的sqlcmd工具,可以导入执行.以SQL Server 2008R版本为例: 第一步:Win+R 键入:cmd 命令,开启命令行工具: 第二步:键入:cd C:\Program Files ...

  2. Flask中数据库关联与分页与cache缓存(十二)

    1 一对多(One To Many) 表示一对多的关系时,在子表类 Post 中需要通过 foreign key (外键)引用父表类 User 在Post类中指定ForeignKey: class P ...

  3. MySQL的基础(优化）2

    1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...

  4. 如何处理错误信息 Pricing procedure could not be determined

    当给一个SAP CRM Quotation文档的行项目维护一个产品时,遇到如下错误信息:Pricing procedure could not be determined 通过调试得知错误消息在fun ...

  5. Jmeter入门18 Jmeter添加cookie的两种方式

    jmeter中添加cookie可以通过配置HTTP Cookie Manager,也可以通过HTTP Header Manager,因为cookie是放在头文件里发送的. 实例:博客园点击添加新随笔  ...

  6. 【转】JS模块化工具requirejs教程(一)：初识requirejs

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...

  7. [19/03/21-星期四] 异常(Exception) (一)

    一.引言 在实际工作中,我们遇到的情况不可能是非常完美的.比如:你写的某个模块,用户输入不一定符合你的要求;你的程序要打开某个文件, 这个文件可能不存在或者文件格式不对 ,你要读取数据库的数据,数据可 ...

  8. 2018.11.8 Error contacting service. It is probably not running.

    安装zookeeper-3.4.6的时候,启动正常没报错,但zkServer.sh status查看状态的时候却出现错误,如下: JMX enabled by default Using config ...

  9. dijkstra 最小费用最大流

    前言:众所周知:spfa他死了 滑稽 dijkstra同样为最短路算法,为什么不能跑费用流qwq 好像是因为有负权边的缘故 但是如果我们如果使用某种玄学的将边权都拉回到正数的话 就可以跑了dijkst ...

  10. HDU 1110 Equipment Box （判断一个大矩形里面能不能放小矩形）

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1110 Equipment Box Time Limit: 2000/1000 MS (Java/Oth ...