KO学习笔记之初识Knockout.js

KO学习笔记之初识Knockout.js

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

使用KO这一切都变得非常简单。它可以让你很轻易的扩展项目的复杂度，而不必担心由此产生的数据不一致问题。它仅仅只需要将你的数据转换成一个JavaScript数组，然后使用foreach将数据数组绑定到页面中的一个表格table或者一组div中。每当数据数组发生变化时，UI界面会自动响应改变（你不需要指出如何插入新行
或在哪里插入），剩下的就是UI界面数据同步了。

总结：KO无意与jQuery这些类似的DOM 操作框架进行竞争。KO提供了一个数据模型与用户UI界面进行关联的高层次方式。KO本身不依赖jQuery，但是你可以一起同时使用jQuery， 生动平缓的UI改变需要使用jQuery。

I、KO重要特性

优雅的依赖跟踪-任何时候当数据源模型发生变化时，它都能够自动的更新你UI的指定内容。
声明绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定，你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。
良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。
II、其他优点：

纯JavaScript库-兼容任何服务器和客户端技术。
可以很好的应用到已有的应用程序中-而不需要程序主要架构发生变化。
简洁-采用Gzip压缩之后只要13K。
兼容任何主流浏览器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)
一套全面完整的规范（采用行为驱动开发）-这意味着在新的浏览器或平台中也能够很容易验证通过。

var myViewModel = {  personName: 'Bob',    personAge: 123};//定义一个JS对象
The name is <span data-bind="text: personName"></span>       //创建一个视图声明式绑定这个View Model
ko.applyBindings(myViewModel);                               //激活Knockout

输出：
The name is Bob

上面，你已经看到如何创建一个基本的数据模型以及如何利用绑定来显示它的属性。但是KO最重要的一个属性就是当View Model发生变化时能够自动的更新UI界面。KO是如何能够知道你的View Model已经发生改变了呢？答案是：你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript 对象，能够通知用户它的改变以及自动检测依赖关系。
var myViewModel = {
personName: ko.observable(‘Bob’),
personAge: ko.observable(123)
};

1、读取当前监控的属性值，只需要直接调用observable（不需要参数），在这个例子当中，调用myViewModel.personName()将会返回’Bob’，调用myViewModel.personAge() 将会返回’123’

2、写一个新值到监控属性上，调用observable方法，将要写的值作为一个参数传入即可。例如，调用myViewModel.personName(‘Mary’) 将会把名称改变成 ‘Mary’。

3、一次性改变Model对象监控的多个属性值，你可以使用链式方法。例如：myViewModel.personName(‘Mary’).personAge(50) 将会把名称改变成’Mary’将年龄设置为 50.

监控属性最重要的一点就是可以随时监控，也就是说，其他代码可以告诉它哪些是需要通知发生变化的。这就是为什么KO会有如此多的内置绑定语法。所以，当你在页面中编写data-bind=”text: personName”，text 会绑定注册到自身，当personName发生变化时，它能够立即得到通知。

当你通过调用 myViewModel.personName(‘Mary’) 将名称的值改变成为’Mary’时，text绑定会自动更新新值到其对应的DOM对象元素上,这就是为什么改变数据模型能够自动刷新View页面。