knockout是一款前端实现MVVM的JS框架，仅knockout.js一个47kb的文件，相当实用，做前端无刷新页面，快速实现JS与HTML数据交互。
knockout目前最新版：knockout-3.1.0.js
关于knockout可以去官网学习，官网内容很丰富，讲的很详细，可在线学习
knockout官网：http://knockoutjs.com/
本文主要讲官网没有提到的更新列表中的数据，绑定列表时，其中某条数据发生了变化页面无法及时刷新，其实官方没有提供刷新功能，于是我们用了一点小技巧来实现数据更新后刷新，而不用重新绑定整个列表：
<body> <div data-bind="foreach:datas"> <p> <span data-bind="text:n"></span> : <span data-bind="text:a"></span> <button data-bind="click:$parent.click">换</button> </p> </div> </body> <script> function ViewModel() { var self = this; this.datas = ko.observableArray([ { n: "ad", a: "yes" }, { n: "zs", a: "no" }, { n: "ls", a: "no" } ]); self.click = function () { //拷贝当前点击对象到tmp，更改tmp需要更新的值，将this替换为tmp var tmp = this.clone(); tmp.a = tmp.a == "yes" ? "no" : "yes"; self.datas.replace(this, tmp); } }; ko.applyBindings(new ViewModel()); //克隆对象 Object.prototype.clone = function () { var obj = {}; for (var p in this) obj[p] = this[p]; return obj; }; </script>
这样就可以实现刷新。
原理就是将要更新的对象拷贝副本，更新副本，再调用replace方法将要更新的对象替换为副本对象。replace方法是官方API提供的，一旦调用成功就会刷新页面。