ko(knockoutjs)动态属性绑定
knockoutjs 简称 koko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性。什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit。数据并不包括Edit属性,mvvm绑定时,会发现报错。那么一定需要拓展ko才能达到我们的目的。
首先来认识有值属性绑定,和 无值属性绑定:
一、有值属性绑定:JS模型:
1 $(function () { 2 var viewModel = function () { 3 var self = this; 4 5 self.text = ko.observable(1); 6 }; 7 ko.applyBindings(new viewModel()); 8 });
<div data-bind='text:text'></div>
二、无值属性绑定: JS模型:
当然text是一般值类型,用法 和 有值属性绑定一样,如果非值类型,而属性是一个对象,而需要使用with:UI绑定:
三、动态属性绑定:动态属性绑定,那么这个属性本身不确定,沿用ko的方法是很难去实现,所以 需要进行拓展。JS拓展:
JS模型:
UI绑定:
ext中,第一个text是ko text方法,第二个text必须是字符串,是context/viewModel的属性。所以ext的动态属性,可以使用于任何ko方法,比如ext:{text:'text', value:'text'}呈现:
1 $(function () { 2 var viewModel = function () { 3 var self = this; 4 5 self.text = ko.observable(); 6 }; 7 ko.applyBindings(new viewModel()); 8 });
1 <div data-bind='with:text'> 2 <div data-bind="text:property"></div> 3 </div>
1 //雾里看花 Q:397386036 2 ko.bindingHandlers.ext = { 3 update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 4 var value = ko.utils.unwrapObservable(valueAccessor()); 5 for (var handler in value) { 6 if (value.hasOwnProperty(handler)) { 7 if (typeof viewModel[value[handler]] == 'undefined') { 8 viewModel[value[handler]] = ko.observable(); 9 } 10 11 ko.bindingHandlers[handler].update(element, function () { return viewModel[value[handler]]; }); 12 } 13 } 14 } 15 };
1 $(function () { 2 var viewModel = function () { 3 }; 4 ko.applyBindings(new viewModel()); 5 });
1 <div data-bind="ext:{text: 'text'}"></div> 2 <!--事件 便于 测试--> 3 <a href="javascript:void(0)" data-bind="click:function(){$data.text(1);}">更改text值</a>
转自:博客园 雾里kanhua 《ko(knockoutjs)动态属性绑定》
url:http://www.cnblogs.com/g_397386036/archive/2012/11/13/2768990.html
url:http://www.cnblogs.com/g_397386036/archive/2012/11/13/2768990.html
相关推荐
ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性,本文将详细介绍,需要的朋友参考下
KnockoutJS包括mapping插件,成熟前端框架,结合Nhibernate使用,大幅减少数据绑定代码操作
KO绑定 bindingHandlers通常对于使用SharePoint很有用 有关概述,请参见的“部分。 我已经收集了其中一些绑定处理程序并构建了其他绑定处理程序。 在可能的情况下,我相信每个文件中的来源。 不幸的是,在使用...
GopherJS-Ko GopherJS绑定到KnockoutJS安装go get github.com/mibitzi/gopherjs-ko 文献资料有关文档,请参见
textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的双向更新。不同于value绑定,textinput绑定是实时更新的。...pre data-bind="text: ko.toJSON($r
if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值,当非空字符串时则为真),if绑定的作用与visible绑定的作用类似。可控制DOM的显示与隐藏,不一样的地方是,if绑定...
knockoutjs,简称ko,是一个轻量级的MVVM框架,通过简易的UI绑定语法,实现动态更新UI。
任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。 submit绑定目的 submit绑定即为提交绑定,通常用于form元素。这种绑定方式会打断默认...
而knockoutjs专注于数据绑定,只需一两天就可以投入使用了,学习成本不要太低!在前端进化如此迅速的时代,学习成本也是不得不考虑的一个因素。很多时候其实我们的项目并没那么复杂,也并不需要万能的框架,更需要的...
自定义绑定提供程序(用于ko- *属性)。 ES6组件加载器(SystemJS) 使用JSPM 基于ZURB Foundation 5 ExpressJS服务器 细节 该项目在前端(“ wwwroot”下)使用SystemJS(模块加载),BabelJS(用于ECMAScript...
在上一篇Knockoutjs 学习系列(一)ko初体验文章中提到,ko中的 data-bind = “XX:OO”绑定大法除了可以绑定text、value等内容,还可以绑定visible、style等外观属性,也可以绑定click、textInput等各种事件,甚至还...
ko-multiple-select-binding一个KnockoutJS自定义绑定,将“应用于标准的“ select”元素 ###设置和依赖项 1.11.2或更高版本 3.2.0或更高版本 jQuery插件 1.1.0或更高版本 ko-multiple-select-binding.js < ...
刷新悬停元素的KO绑定 将上下文对象直接记录到浏览器开发工具控制台中 跟随鼠标光标和切换实时上下文的快捷方式 单击并执行一个功能 如何使用 右键单击运行KnockoutJS的页面,然后按“ KO Context Hover”选项以激活...
ko-定时器 一个可以绑定到任何 DOM 对象的 Javascript 计时器。 介绍 需要在您的页面上显示计时器吗? 我会说这是一个非常普遍的必需品。 实现自己的计时器当然很容易; 另外有很多方法可以实现这一点! 只有一个...
任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。 重要特性: 优雅的依赖追踪 – 不管任何时候你的数据模型更新,都会自动更新相应的...
用于(部分)KnockoutJS 应用程序的 ViewModel 生命周期管理器。 提供比内置 KO 组件更大的灵活性并防止不必要的回流。 应用程序接口 var show = kontainer.create(Element|String target) 返回函数以替换给定目标...
上勾 我发现在开发过程中有用的帮助器,类和绑定的集合。用法使用nuget或bower安装uppercut。 凉亭: bower install uppercut Nuget : Install-Package uppercutjs uppercutjs种类和 存储可还原为原始值的副本的可...
ko-bootstrap-switch Bootstrap Switch 的非常简单的敲除绑定处理程序确保你有脚本引用自举开关 KnockoutJS jQuery如何使用 // Include dependencies< link href = "bootstrap.css" rel = "stylesheet" >< ...
向 KnockoutJS 添加fastclick自定义数据绑定。 fastclick减少了点击触摸设备时 300ms 的延迟问题。 这个模块只是一个围绕库的 KnockoutJS 包装器。 安装到 Workspace 项目中 通过NPM安装这个模块: npm install ...