KnockoutJS更新数组某一项数据

最新推荐文章于 2023-03-16 16:02:19 发布

KinderWang

最新推荐文章于 2023-03-16 16:02:19 发布

阅读量2.8k

点赞数

分类专栏： Web前端文章标签： javascript mvvm KnockoutJS

本文链接：https://blog.csdn.net/woniumenga/article/details/50912656

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

效果如下图：

KinderWang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
KnockoutJS更新数组某一项数据

KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。本文主要实现官网没有提到的更新数组绑定中的某一项数据时的操作，首先克隆该对象并更改后进行替换，从而达到更新的目的。这样可以避免重新绑定数组并更新整个列表。 ko
复制链接

扫一扫