Fork me on GitHub

李可

导航

统计

KnockoutJS:

回到顶部

一、ko对象 js对象的改变都会导致viewmodel的变化,但view不一定变化

  • 往ko对象里面push,viewmodel的变化,引起view的变化。
  • 往js对象里面push,model的变化引起viewmodel的变化,不能引起view的变化
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul data-bind="foreach:arr">
			<li data-bind="text:$data.chineseName"></li>
		</ul>
		<button data-bind="click:addOnePlanet">添加</button>
		
		<script type="text/javascript" src="knockout.js"></script>
		<script type="text/javascript">
		var  Planets = [
					{id:1,englishName:"Mercury",chineseName:"水星",description:"离太阳最近的一颗行星"},
					{id:2,englishName:"Venus",chineseName:"金星",description:"拥有非常厚的大气层的一颗行星"},
					{id:3,englishName:"Earth",chineseName:"地球",description:"我们的家园"}
				];
		var vm=function(){
			var self=this;
			self.arr=ko.observableArray(Planets);
			self.addOnePlanet=function(){
				//记得:往ko对象里面push  model的变化-->viewmodel的变化
				self.arr.push({id:4,englishName:"Mars",chineseName:"火星",description:"一颗红色的星球"})

				//往js对象里面push  model的变化不能引起viewmodel的变化
				//Planets.push({id:4,englishName:"Mars",chineseName:"火星",description:"一颗红色的星球"})

				console.log(self.arr().length);//不论哪个都会self.arr().length都会增加
			}
		}
		ko.applyBindings(new vm());
		</script>
	</body>
</html>

posted on   李可在江湖  阅读(246)  评论(0编辑  收藏  举报

编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示