前言:

当你的UI界面稍微复杂且含有一些相同的行为的话，如果你仅仅只使用Jquery，那么UI处理上会比你想象的要复杂棘手，同时会让维护费用相当昂贵。思考这样一个例子：在一个表格里显示一个项目列表，统计表格中列表的数量，当项目列表数量小于5时启用“Add”按钮，否则就禁用。Jquery没有基本的数据模型概念，所以你想要获取项目列表的数量，你需要从表格table/tr/div这些数量上去进行推断才能知道。如果需要在某些SPAN里显示数据的数量，当添加新数据的时候，你还要记得更新这个SPAN的text。当然，你还要记住当总数>=5条的时候，你需要禁用Add按钮。然后，如果还要实现Delete功能的时候，你不得不指出哪一个DOM元素被点击以后需要改变。

applyBinding & Observables

一般的数据绑定有三种:One-Time，One-Way，Two-way

One-Time绑定模式的意思即为从viewModel绑定至UI这一层只进行一次绑定，程序不会继续追踪数据的在两者中任何一方的变化，这种绑定方式很使用于报表数据，数据仅仅会加载一次。

One-Way绑定模式即为单向绑定，即object-UI的绑定，只有当viewModel中数据发生了变化，UI中的数据也将会随之发生变化，反之不然。

Two-Way绑定模式为双向绑定，无论数据在Object或者是UI中发生变化，应用程序将会更新另一方，这是最为灵活的绑定方式，同时代价也是最大的。数据绑定只是作为元素的自定义属性写上标签内，并不能决定它是何种绑定。

如果值是通过ko.observable定义的说明是双向绑定，否则为One-Time绑定，在knockout不存在单向绑定。

Text绑定

Knockout将参数值设置为元素内容。元素之前的内容将会被覆盖。

如果参数是一个observable值，text绑定将会在值变化时更新元素text内容。如果参数不是observable值，text绑定仅仅会设置元素内容一次，以后不会再更新。

html绑定

KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。

如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。

Visible绑定

当参数设置为一个假值(例如bool型值false、整型值0、null或者undefined)时，该绑定会设置yourElement.style.display为none，让元素隐藏。它的优先级高于任何你在CSS中定义的隐藏样式。

attr绑定

连接的href属性被设置为index.html， title属性被设置为橘子大王。

if绑定

此例中如果sha为null，则不会进行显示。

event绑定

foreach绑定

循环遍历输出数组

with绑定

这样我们在使用user下的width和height的时候我们就不需要使用user.width来调用了，因为我们使用with:user来指定了user的上下文，当我们使用user下面的属性时就可以直接使用了

submit绑定

当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。

Computed Observable

当username或者msg变化，它将会随时更新(当依赖关系发生变化，你的计算函数就会被调用，并且它的值都会更新到UI对象或其他的依赖属性上去)。

使用peek控制依赖

比如一个Ajax请求。peek方法可以帮助你在不需要创建依赖的情况下去控制一个监控属性或者依赖属性

 ko.computed(function () {
        var params = {
            page: this.pageIndex(),
            selected: this.selectedItem.peek()
        };
        $.getJSON('/user/hh', params, this.currentPageData);
    }, this);

依赖属性通过Ajax方法和其他两个监控属性参数来重新加载一个名为currentPageData的监控属性。当pageIndex发生变化时，依赖属性会被更新，但会忽略掉selectedItem的变化，因为它是通过peek方法控制的。在这种情况下，用户可能希望仅仅在数据被加载时才使用selectedItem的当前值用于追踪。

以上就是knockout.js的知识点。

记录学习,每天进步一点点的橘子大王。

喜欢就关注我吧