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 相关文章推荐
JavaScript prototype属性使用说明
May 13 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
JS验证字符串功能
Feb 22 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
JavaScript中的几种继承方法示例
Dec 06 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
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
对联广告js flash激活
2006/10/19 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
JS input 数字验证代码
2009/07/30 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
用Python shell简化开发
2018/08/08 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
如何学习Python time模块
2020/06/03 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
详解python datetime模块
2020/08/17 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
英文自我鉴定
2013/12/10 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
golang的文件创建及读写操作
2022/04/14 Golang