源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-09-25 18:27 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:ko knockoutjs动态属性绑定技巧应用
knockoutjs 简称 ko ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性。 什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit。数据并不包括Edit属性,mvvm绑定时,会发现报错。 那么一定需要拓展ko才能达到我们的目的。 首先来认识有值属性绑定,和 无值属性绑定: [b]一、有值属性绑定[/b]: JS模型:
[u]复制代码[/u] 代码如下:
$(function () { var viewModel = function () { var self = this; self.text = ko.observable(1); }; ko.applyBindings(new viewModel()); });
UI绑定:
[u]复制代码[/u] 代码如下:
<div data-bind='text:text'></div>
呈现: [img]http://files.jb51.net/file_images/article/201211/2012111411193628.jpg[/img]   [b]二、无值属性绑定[/b]: JS模型:
[u]复制代码[/u] 代码如下:
$(function () { var viewModel = function () { var self = this; self.text = ko.observable(); }; ko.applyBindings(new viewModel()); });
当然text是一般值类型,用法 和 有值属性绑定一样,如果非值类型,而属性是一个对象,而需要使用with: UI绑定:
[u]复制代码[/u] 代码如下:
<div data-bind='with:text'> <div data-bind="text:property"></div> </div>
三、动态属性绑定: 动态属性绑定,那么这个属性本身不确定,沿用ko的方法是很难去实现,所以 需要进行拓展。 JS拓展:
[u]复制代码[/u] 代码如下:
//雾里看花 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模型:
[u]复制代码[/u] 代码如下:
$(function () { var viewModel = function () { }; ko.applyBindings(new viewModel()); });
UI绑定:
[u]复制代码[/u] 代码如下:
<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'} 呈现: [img]http://files.jb51.net/file_images/article/201211/2012111411193629.jpg[/img]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部