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提供的，一旦調用成功就會刷新頁面。