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都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
随机推荐
- WindowsForm公共控件--2016年12月5日
Button text:修改按钮显示的文字 CheckBox Checked:是否选中 CheckedListBox checkedListBox.Items.Add(显示的值,初始选中状态); ch ...
- Python之路,Day3 - Python基础3
一.文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- 【XLL 框架库函数】 TempActiveCell/TempActiveCell12
这两个函数创建 XLOPER/XLOPER12 ,包含了当前激活工作表上的单元格引用. LPXLOPER TempActiveCell(WORD row, BYTE col); LPXLOPER12 ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- WordPress安装插件提示输入FTP账户信息
在WP后台安装插件时提示输入FTP账户信息,其实出现这个的问题的原因是Apache/Nginx的执行身份非文件属主身份. 如果你使用的是独立服务器或VPS,WordPress的安装目录为 /home/ ...
- 提交form表单
方法一: $.ajax({ }) $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid' ...
- java-Lambda表达式
浏览以下内容前,请点击并阅读 声明 Lambda表达式与匿名类的作用类似,当实现的接口仅有一个方法时,使用lambda表达式能够减少代码的使用量. //此处定义一个仅含有一个抽象方法的功能接口 int ...
- pointers on c (day 1,chapter3)
第3章 数据 c中,仅有4中基本数据类型——整型.浮点型.指针和聚合类型(如数组和结构等). 整型:字符.短整型和长整型,它们都分为有符号(signed)和无符号(unsigned). short i ...
- 【BO】安装BO服务器时，oracle服务端安装ora-12514和12541的问题
今天在安装BO服务器,oracle数据库时,出现了这样一个问题,描述如下: 首先安装oracle10g Server 32位版.安装ORCL数据库之后,使用10gServer下的NET MANAGER ...
- BZOJ2087 : [Poi2010]Sheep
一条边能连上当且仅当它没有经过任何点,并且两边的点都是偶数个. 枚举原点,通过极角排序求出哪些边是合法的,然后区间DP即可. 时间复杂度$O(nm\log m+n^3)$. #include<c ...