计算属性 konckout.js的API文档,写的极为详细和生动,透过MVVM的运作原理,开发时只需专注于定义ViewModel逻辑,不需耗费心力处理TextBox.Select的onchange.onclick等互动细节,就能达到UI元素与数据天人合一的境界.这一系列的konckout学习笔记,将逐一探讨knockout.js在常见网页情境上的应用.  Knockout.js随手记(1)开篇已经示范过最简单的应用,为<input>与<span>加上data-bind宣告,透过ko…

visible, disable, css绑定 这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式. 先简单的看一段代码: <p> <input id="isvip" type='checkbox' data-bind="checked: isVip" /><label for="isvip">是否是会员</labe…

数组元素的新增/移除事件 前两篇博客已经很清楚的知道knockout.js通过observableArray()数组元素增减,可以实时的反映在UI上.当然我们想在数组增加或移除元素时加上自定义逻辑就好比一个触发器的感觉,可以吗? foreach提供了afterAdd及beforeRemove两个额外的事件,允许在数组新增.移除元素时执行特定逻辑.在此继续沿用先前的用户列表呈现范例,加上两个效果: 新增数据时,将最新加入的数据和表格进行着色修饰 删除数据时,加上数据淡出特效 而在ViewModel…

实时反映对象属性的变化 在前一篇博客中我们使用了如下代码去新增user对象,即push方法: $("#btnAddUser").click(function () { vm.users.push(new UserViewModel( $("#u_id").val(), $("#u_name").val(), parseInt($("#u_score").val()))); }); 使用 ko.computed去动态的计算use…

以列表方式呈现数据  处理以数组形式储存的多条数据,要先认识foreach.在ViewModel定义一个JavaScript Array或是ko.observableArray() (observableArray在新增或剔除数组元素时,KO会立刻察觉反应到UI,普通Array则不会),然后在某个容器元素(例如: div, ul, tbody... )声明data-bind="foreach: arrayPropName",就可以指定KO将容器内的子元素模板(Template)就会对数…

动态绑定下拉列表 在<select> data-bind的options选项如果绑定到ko.observableArray(),就可以动态新增选项效果,也就是可以利用其完成常见的级联效果的. 在这一篇文章中,我们用单页面完成无刷新的前台新增选项和使用MVC完成后台的动态添加2个例子. 范例一: ViewModel中声明一个selectOptions属性为一个ko.observableArray()对象,并将其设为<select>的options下拉列表的数据源,再用两个<in…

下拉菜单 <select>也是网页设计重要的一环,knockout.js(以下简称KO)也有不错的支持.针对<select>,在data-bind除了用value可对应下拉菜单的选取结果,其选项也可以由ViewModel中取得,甚至动态改变. 以下是<select>常用的data-bind参数: options : 指向数组或ko.observableArray(),KO会将数组元素转换为下拉选项.如果是ko.observableArray(),当动态增加或移除阵列元素…

新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个JavaScript library,帮助创建丰富的显示和编辑器UI,通过干净的底层数据模型.你可以在任何时候动态更新UI的选择部分. 3.知道knockoutjs的实现原理[MVVM模式] MVVM的优点 MVVM已在微软WPF/Silverlight/WP7中广泛应用,和MVC模式一样,主要目的是分离…

1.判断arr数组是否含有元素str,没有返回-1 arr.indexOf(str) 2.遍历arr数组,k为键,v为值 arr.map((v, k) => { return;}) 3.arr数组添加元素 arr.push('abc') arr.push({'id':3, 'name':'abc'}) 4.arr数组删除元素 i为下标或key值,n为删除该下标后的几个元素,一般为1 arr.splice(i,n); arr.splice(1,1); arr.splice('a',1); js中字…

var name = 'frog' function hello(){ alert(name); // undefined var name = 'bbc'; } 在javascript中,函数是可以形成一个独立作用域的,变量的查找,首先是就近原则,先看自己有没有,自己没有,就会自动跑到外层去找,这一点和其 它语言可能不一样,它会自动跑外边去找.在整个hello作用域内,只要定义了name这个变量,就不会去window中找,不过呢,在hello自己的 作用域内,还有一个规则,申明之前调用,都是u…