1、Knockout.js是什么?
前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下。...而不管是Silverlight/WPF或JavaScript,MVVM程式库的目标即在节省前述自行开发的工夫,只需在显示/输入元素上注明其对应的ViewModel属性,之后全部交给knockout.js...开始使用Knockout.js 如果你建立像asp.net mvc 4.0这样的Web应用程序,那么你可以不用任何操作即可以使用Knockout.js,如果你建立其他的项目或许需要引用该类库。
数组也被转换成了observable数组,如果服务器更新改变了数组的个数,mapping插件也会添加或者删除相应的item项,也会尽量保持和原生JavaScript数组相同的order顺序。
click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意...
value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。
对每个item,KO都会将它作为一个 添加到里,之前的options都将被删除。 如果参数是一个string数组,那你不需要再声明任何其它参数。
checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox(<input type='checkbox'>...
text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数。该绑定在显示或者上非常有用,但是你可以用在任何元素上。
在很多场景下,它都非常有用,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行添加和删除。...一个observableArray 仅仅监控他拥有的对象,并在这些对象添加或者删除的时候发出通知。...-1 : 1); }); myObservableArray.splice() 删除指定开始索引和指定数目的数组对象元素。.../删除所有age属性小于18的元素并将被删除元素作为一个数组返回 myObservableArray.removeAll(['Chad', 132, undefined]);//删除所有等于'...Chad', 123, or undefined的元素并将被删除元素作为一个数组返回
当参数设置为一个真值时(例如:布尔值true,或者非空non-null的对象或者数组) ,该绑定会删除该元素的style.display值,让元素可见。
这样用户可以看到你的程序有多聪明,来告诉用户只能输入2位小数,否则的话自动删除多余的位数,当然也不能输入负数,因为write的callback函数会自动删除负号。
我们采用MVC和knockout.js实现一个简单的学生信息管理,实现学生信息的增删改查功能。通过knockout.js来进行数据的绑定,你会发现代码变得很优雅。...knockout.js在Script文件夹中,只用关注带黄色底纹的文件,其他没有用。...Class = form["Class"]; return Json(new { type = "success" }); } //删除...ViewModel(){ var self=this; self.students=ko.observableArray(data);//添加动态监视数组对象 //删除... 删除
如果在map的时候,你想忽略一些属性,你可以使用ignore累声明需要忽略的属性名称集合:
我们都知道,在foreach binding中,使用$index可以得到基于0的索引序号,但在列表显示中,我们更希望这个索引是从1开始的,怎么处理呢?
当用户在multi-select列表选择或反选一个项的时候,会将view model的数组进行相应的添加或者删除。...同样,如果view model上的这个数组是observable数组的话,你添加或者删除任何item(通过push或者splice)的时候,相应的UI界面里的option项也会被选择上或者反选。
Css绑定 css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。...profitWarning: currentProfit() 如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的...如果不是,那CSS class将会只添加或者删除一次并且以后不在更新。 你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。
Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSO...
于是,name像我们期望的一样更新了,但是在children数组里,子项Alicw被删除而新项Alicws被添加到数组里。
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。... 如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的style值。如果不是,那style值将会只应用一次并且以后不在更新。...KO将用它的执行结果来决定是否应用或删除style值。...如果参数是监控属性observable的,那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是,那attribute值将会只应用一次并且以后不在更新。
enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input,select,和textarea上非常有用。
领取专属 10元无门槛券
手把手带您无忧上云