ko knockoutjs动态属性绑定技巧应用
ko knockoutjs动态属性绑定技巧应用
发布时间:2016-12-30 来源:查字典编辑
摘要:knockoutjs简称koko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性。什么是不确定属性,比如ListModel...

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动态属性绑定技巧应用1

二、无值属性绑定:

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动态属性绑定技巧应用2

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类