處理以數組形式儲存的多條數據,要先認識foreach。在ViewModel定義一個JavaScript Array或是ko.observableArray() (observableArray在新增或剔除數組元素時,KO會馬上察覺反應到UI,普通Array則不會),而後在某個容器元素(例如: div, ul, tbody... )聲明data-bind="foreach: arrayPropName",就能夠指定KO將容器內的子元素模板(Template)就會對數組對象的數據自動循環遍歷,例如:javascript
<tbody data-bind="foreach: users"> <tr> <td><span data-bind="text: id"></span></td> <td><span data-bind="text: name"></span></td> <td><span data-bind="text: score" style='text-align: right'></span></td> <td><a href='#' data-bind="click: $root.removeUser">移除</a></td> </tr> </tbody>
在上面的例子中,咱們假設ViewModel有一個數組屬性—users,其中每筆數據對象都有id, name, score三個屬性,在tbody上宣告data-bind="foreach: users",意味者<tbody>到</tbody>間的內容,會依users數組的元素多寡重複出現n次。而其中元素(如<span>, <a>)繫結對象即是users中的每一條用戶數據,所以只要寫上data-bind="text: id"就能夠對應到用戶的id屬性。最後一個<td>中出現了<a data-bind="click: $root.removeUser">,你必定能夠猜測它可用來移除該用戶數據,$root是一個特殊變量,會指向ViewModel個體。在這裏必須加上的緣由是咱們在ViewModel定義了remoteUser方法,但在<tbody>中,默認綁定的對象是users對象,若只寫data-bind="click: removeUser",KO會誤認成users對象上的removeUser方法。加上$root,KO會改由ViewModel的最上層尋找removeUser方法。html
removeUser的定義以下:java
self.removeUser = function(user) { self.users.remove(user); }
當它在foreach範圍被點擊觸發時,會接收到一個參數,指向被點擊的那條數據對象。因此,只需self.users.remove(user)就能夠將該條數據從observableArray移除,網頁也會立刻作出迴應,該條數據的<tr>會馬上從<tbody>中消失。jquery
若是要新增用戶數據,在observableArray中加入一條具備id, name, score三個屬性的對象便可,爲了規範組件包含全部必要屬性,咱們將user定義成function模擬ViewModel形式的對象:數組
function UserViewModel(id, name, score) { var self = this; self.id = id; self.name = name; self.score = score; }
如此新增數據時便可寫成viewModel.users.push(new UserViewModel("0001", "halower", 125)),爲了展示KO能夠實時監控obervableArray的風吹草動,咱們寫一個ko.computed計算全部用戶的score總和:app
self.totalScore = ko.computed(function () { var total = 0; $.each(self.users(), function (i, u) { total += u.score; }); return total; });
共 <span data-bind="text: users().length"></span> 條, 合計 <span data-bind="text: totalScore"></span> 分
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index2</title> <script src="~/Scripts/jquery-2.0.3.js"></script> <script src="~/Scripts/knockout-2.3.0.js"></script> <script type="text/javascript"> //定義user數據對象 function UserViewModel(id,name,score) { var self = this; self.id = id; self.name = name; self.score = score; } //定義ViewModel function ViewModel() { var self = this; self.users = ko.observableArray();//添加動態監視數組對象 self.removeUser = function (user) { self.users.remove(user); } self.totalscore = ko.computed(function () { var total = 0; $.each(self.users(), function (i, u) { total += u.score; }) return total; }); }; $(function () { var vm = new ViewModel(); //預先添加一些數據 vm.users.push(new UserViewModel("d1", "rohelm", 121)); vm.users.push(new UserViewModel("d2", "halower", 125)); $("#btnAddUser").click(function () { vm.users.push(new UserViewModel( $("#u_id").val(), $("#u_name").val(), parseInt($("#u_score").val()))); }); ko.applyBindings(vm); }); </script> </head> <body> <section style="margin:250px"> <section> ID<input type="text" id="u_id" style="width:30px"> Name<input type="text" id="u_name" style="width:30px"> Score<input type="text" id="u_score" style="width:30px"><br/> <input value="Add" id="btnAddUser" type="button" style="width:200px; background-color:#ff6a00;"/><br/> 共 <span data-bind="text: users().length"></span> 條--------------合計 <span data-bind="text: totalscore"></span> 分 </section> <section> <table> <thead> <tr><th>ID</th><th>Name</th><th>Score </th><th>Option</th></tr> </thead> <tbody data-bind="foreach: users"> <tr> <td><span data-bind="text: id"></span></td> <td><span data-bind="text: name"></span></td> <td><span data-bind="text: score"></span></td> <td><a href='#' data-bind="click: $root.removeUser">Remove</a></td> </tr> </tbody> </table> </section> </section> </body> </html>
備註:學習
本文版權歸你們共用,不歸本人全部,全部知識都來自於官網支持,書本,國內外論壇,大牛分享等等......後續將學習knockout.js的經常使用功能。this
若是你喜歡本文的話,推薦共勉,謝謝!spa