以列表方式呈現數據
處理以數組形式儲存的多條數據，要先認識foreach。在ViewModel定義一個JavaScript Array或是ko.observableArray() (observableArray在新增或剔除數組元素時，KO會立刻察覺反應到UI，普通Array則不會)，然后在某個容器元素(例如: div, ul, tbody... )聲明data-bind="foreach: arrayPropName"，就可以指定KO將容器內的子元素模板(Template)就會對數組對象的數據自動循環遍歷，例如:
<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方法。
removeUser的定義如下：
self.removeUser = function(user) { self.users.remove(user); }
當它在foreach范圍被點擊觸發時，會接收到一個參數，指向被點擊的那條數據對象。所以，只需self.users.remove(user)就可以將該條數據從observableArray移除，網頁也會馬上做出回應，該條數據的<tr>會立刻從<tbody>中消失。
如果要新增用戶數據，在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總和:
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的常用功能。
如果你喜歡本文的話，推薦共勉，謝謝！