版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq395537505/article/details/85853138
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>
