knockout是一款前端實現MVVM的JS框架,僅knockout.js一個47kb的文件,至關實用,作前端無刷新頁面,快速實現JS與HTML數據交互。前端
knockout目前最新版:knockout-3.1.0.jsapp
關於knockout能夠去官網學習,官網內容很豐富,講的很詳細,可在線學習框架
knockout官網:http://knockoutjs.com/學習
本文主要講官網沒有提到的更新列表中的數據,綁定列表時,其中某條數據發生了變化頁面沒法及時刷新,其實官方沒有提供刷新功能,因而咱們用了一點小技巧來實現數據更新後刷新,而不用從新綁定整個列表:this
<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>
這樣就能夠實現刷新。spa
原理就是將要更新的對象拷貝副本,更新副本,再調用replace方法將要更新的對象替換爲副本對象。replace方法是官方API提供的,一旦調用成功就會刷新頁面。prototype
knockout和示例下載code