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

2019-09-23 08:46:39来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

ko knockoutjs是为指定的dom元素添加的事件,它的对应参数是函数,本文是爱站技术频道小编为大家带来的ko knockoutjs动态属性绑定技巧应用,感兴趣的朋友可以一起进入下文了解一下!
一、有值属性绑定:
JS模型:
?

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


UI绑定:

?

?

?


<div data-bind='text:text'></div>


呈现:
?
二、无值属性绑定
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动态属性绑定技巧应用,如果你还想了解这方面的专业知识,爱站技术频道帮你解析,希望大家好好研习哦。


原文链接:https://js.aizhan.com/develop/JavaScript/9078.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS注册页面的简单实例

下一篇:jQuery 数据缓存模块进化史详细介绍