Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 17:48:10
Original
1474 people have browsed it

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绑定:
复制代码 代码如下:



呈现:
 
二、无值属性绑定
JS模型:
复制代码 代码如下:

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

当然text是一般值类型,用法 和 有值属性绑定一样,如果非值类型,而属性是一个对象,而需要使用with:
UI绑定:
复制代码 代码如下:





三、动态属性绑定:
动态属性绑定,那么这个属性本身不确定,沿用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绑定:
复制代码 代码如下:

ext中,第一个text是ko text方法,第二个text必须是字符串,是context/viewModel的属性。所以ext的动态属性,可以使用于任何ko方法,比如ext:{text:'text', value:'text'}
呈现:
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!