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>
知识没有高低贵贱之分。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?