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>
KnockoutJS:的更多相关文章
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证
验证: 快要完成我们程序的界面部分了.剩下的事情就是在用户点击 "保存" 的时候管理验证问题了.验证是主要需求,今天就是最无知的应用也不会忽视它.通过正确的验证,用户可以知道应该输 ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- knockoutjs如何动态加载外部的file作为component中的template数据源
玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...
- KnockoutJS 3.X API 第八章 映射(mapping)插件
Knockout旨在允许您将任意JavaScript对象用作视图模型. 只要一些视图模型的属性是observables,您可以使用KO将它们绑定到您的UI,并且UI将在可观察属性更改时自动更新. 大多 ...
- KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器
无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
随机推荐
- linux source
清华TUNA镜像源https://mirrors.tuna.tsinghua.edu.cn/ 中科大USTC镜像源 https://mirrors.ustc.edu.cn/ ali http://mi ...
- SQL Server服务器上需要导入Excel数据的必要条件
SQL Server服务器上需要导入Excel数据,必须安装2007 Office system 驱动程序:数据连接组件,或者Access2010的数据库引擎可再发行程序包,这样就不必在服务器上装Ex ...
- 这交互炸了：饿了么是怎么让Image变成详情页的
这交互炸了:饿了么是怎么让Image变成详情页的 晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了. 本文同步自wing的地方酒馆 不过还是有槽点.我是无意中才发现可以 ...
- gbk和gb2312的区别
//GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码;GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 //总体说来,GBK包括所有的汉字, ...
- iOS/Android 浏览器(h5)及微信中唤起本地APP
在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: ...
- iOS Waxpatch项目(动态更新)
我的iOS Waxpatch项目地址https://github.com/piaojin/iOS-WaxPatch
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- Java的RMI远程方法调用实现和应用
最近在学习Dubbo,RMI是很重要的底层机制,RMI(Remote Method Invocation)远程方法调用是一种计算机之间利用远程对象互相调用实现双方通讯的一种通讯机制.使用这种机制,某一 ...
- 注解：【无连接表的】Hibernate双向1->N关联
Person与Address关联:双向1->N,[无连接表的],推荐使用 #由N端控制关联关系 #对于指定了mappedBy属性的@OneToMany,@ManyToMany,@OneToOne ...
- linux xorddos样本分析1
样本行为 该样本为国庆期间接到的一个应急,发现为今年比较流行的xorddos,遂分析一番. 运行之后,查看进程,可以发现可疑进程ydxrooqtno,以及ppkzkneour. 多次运行发现除了ydx ...