KnockoutJS是一個JavaScript實現的MVVM框架。非常棒。比如列表數據項增減後，不需要重新刷新整個控件片段或自己寫JS增刪節點，只要預先定義模板和符合其語法定義的屬性即可。簡單的說，我們只需要關注數據的存取。
本文主要實現官網沒有提到的更新數組綁定中的某一項數據時的操作，首先克隆該對象並更改後進行替換，從而達到更新的目的。這樣可以避免重新綁定數組並更新整個列表。
<!DOCTYPE html>
<html>
<head>
<title>ko update array list</title>
<script type="text/javascript" src="knockout-3.4.0.js"></script>
</head>
<body>
<h4>People</h4>
<ul data-bind="foreach: people">
<li>
Name at position <span data-bind="text: $index"> </span>:
<span data-bind="text: name"> </span>
age:<span data-bind="text: age"></span>
<a href="#" data-bind="click: $parent.removePerson">Remove</a>
<a href="#" data-bind="click: $parent.changePerson">Change</a>
</li>
</ul>
<button data-bind="click: addPerson">Add</button>
<script type="text/javascript">
function AppViewModel() {
var self = this;
self.people = ko.observableArray([
{ name: 'Bert', age:19 },
{ name: 'Charles', age:10 },
{ name: 'Denise' , age:11 }
]);
self.addPerson = function () {
self.people.push({ name: "New at " + new Date() , age : 18 });
};
self.removePerson = function () {
self.people.remove(this);
};
self.changePerson = function(){
var tmp = self.clone(this);
console.log(tmp);
tmp.name = "kinderwang";
self.people.replace(this,tmp);
};
//用做ko更新數組某一項數據時的克隆，無需重新清空並綁定整個列表
self.clone = function (source) {
var obj = {};
for (var p in source)
obj[p] = source[p];
return obj;
};
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>