ko knockoutjs动态属性绑定技巧应用


Posted in Javascript onNovember 14, 2012

knockoutjs 简称 ko
ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性。
什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit。数据并不包括Edit属性,mvvm绑定时,会发现报错。
那么一定需要拓展ko才能达到我们的目的。
首先来认识有值属性绑定,和 无值属性绑定:
一、有值属性绑定
JS模型:

$(function () { 
var viewModel = function () { 
var self = this; 
self.text = ko.observable(1); 
}; 
ko.applyBindings(new viewModel()); 
});

UI绑定:
<div data-bind='text:text'></div>

呈现:
ko knockoutjs动态属性绑定技巧应用 
二、无值属性绑定
JS模型:
$(function () { 
var viewModel = function () { 
var self = this; 
self.text = ko.observable(); 
}; 
ko.applyBindings(new viewModel()); 
});

当然text是一般值类型,用法 和 有值属性绑定一样,如果非值类型,而属性是一个对象,而需要使用with:
UI绑定:
<div data-bind='with:text'> 
<div data-bind="text:property"></div> 
</div>

三、动态属性绑定:
动态属性绑定,那么这个属性本身不确定,沿用ko的方法是很难去实现,所以 需要进行拓展。
JS拓展:
//雾里看花 Q:397386036 
ko.bindingHandlers.ext = { 
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
var value = ko.utils.unwrapObservable(valueAccessor()); 
for (var handler in value) { 
if (value.hasOwnProperty(handler)) { 
if (typeof viewModel[value[handler]] == 'undefined') { 
viewModel[value[handler]] = ko.observable(); 
} 
ko.bindingHandlers[handler].update(element, function () { return viewModel[value[handler]]; }); 
} 
} 
} 
};

JS模型:
$(function () { 
var viewModel = function () { 
}; 
ko.applyBindings(new viewModel()); 
});

UI绑定:
<div data-bind="ext:{text: 'text'}"></div> 
<!--事件 便于 测试--> 
<a href="javascript:void(0)" data-bind="click:function(){$data.text(1);}">更改text值</a>

ext中,第一个text是ko text方法,第二个text必须是字符串,是context/viewModel的属性。所以ext的动态属性,可以使用于任何ko方法,比如ext:{text:'text', value:'text'}
呈现:
ko knockoutjs动态属性绑定技巧应用
Javascript 相关文章推荐
js资料toString 方法
Mar 13 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
手机号码,密码正则验证
Sep 04 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JSONP解决JS跨域问题的实现
May 25 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 #Javascript
jquery offset函数应用实例
Nov 14 #Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 #Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 #Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 #Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 #Javascript
Javascript开发之三数组对象实例介绍
Nov 12 #Javascript
You might like
php中文验证码实现示例分享
2014/01/12 PHP
php数组合并的二种方法
2014/03/21 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
成考报名单位证明范本
2014/01/16 职场文书
学校元旦晚会方案
2014/02/19 职场文书
升学宴主持词
2014/04/02 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL