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都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
随机推荐
- 使用iText对pdf做权限的操作（不允许修改，不允许复制，不允许另存为），并且加水印等
添加水印,并且增加权限 @Test public void addWaterMark() throws Exception{ String srcFile="D:\\work\\pdf\\w ...
- 微信支付 发布后显示 System:access_denied
微信支付发布后显示 System:access_denied (android)或 System:not_allow(IOS) 我们项目用的是.NET MVC3 授权目录是:http://mynetd ...
- 如果asp.net mvc中某个action被执行了两次，请检查是不是以下的原因
注释 <link rel="icon" href="#"> 这一句后试试
- 号外！GNOME 3.22 正式发布喽！！！
导读 经过半年的努力开发,别名为“卡尔斯鲁厄”的 GNOME 3.22 正式发布了!“GNOME Software 可以安装和更新 Flatpak 软件包,GNOME Builder 则可以创建它们, ...
- 转：浅谈UNIX下Apache的MPM及httpd.conf配置文件中相关参数配置
为什么要并发处理 以Apache为代表的web服务器中,如果不支持并发,则在一个客户端连接的时候,如果该客户端的任务没有处理完,其他连接的客户端将会一直处于等待状态,这事不可想象的,好像没有为什么要不 ...
- VS2013 预定义的宏
Visual Studio 2013 预定义的宏 https://msdn.microsoft.com/zh-cn/library/b0084kay(v=vs.120).aspx 列出预定义的 ANS ...
- 集合List内容
集合List内容 这次我们学习的主要内容为:集合框架 List 一 集合框架介绍 List集合与数组的区别: 不同点:1> 数组的长度在使用前必须确定,一旦确定不能改变.而List集合长度 ...
- dateset添加一列
ds.Tables[].Columns.Add("short_name", System.Type.GetType("System.String"));//直接 ...
- Modbus总线CRC16效验算法C语言
unsigned short CRC16_Modbus ( unsigned char *pdata, int len){ unsigned short crc=0xFFFF; int i, j; f ...
- PLSQL Develop PlugIn 之脚本自动匹配补全工具CnPlugin
插件位置:百度云 -- 开发工具空间 -- CnPlugin CnPlugin 支持PL/sql Developer 7.0以上版本,它可以根据 关键字+tab/space 来触发代码补全,而关键字. ...