最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

koknockoutjs动态属性绑定技巧应用_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 21:05:27
文档

koknockoutjs动态属性绑定技巧应用_javascript技巧

koknockoutjs动态属性绑定技巧应用_javascript技巧:knockoutjs 简称 ko ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性。 什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit。数据并不包括Edit属性,mvvm绑定时,会发现报错。 那么一定需要拓展ko才能达到我们的
推荐度:
导读koknockoutjs动态属性绑定技巧应用_javascript技巧:knockoutjs 简称 ko ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性。 什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit。数据并不包括Edit属性,mvvm绑定时,会发现报错。 那么一定需要拓展ko才能达到我们的


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


更改text值

ext中,第一个text是ko text方法,第二个text必须是字符串,是context/viewModel的属性。所以ext的动态属性,可以使用于任何ko方法,比如ext:{text:'text', value:'text'}
呈现:

文档

koknockoutjs动态属性绑定技巧应用_javascript技巧

koknockoutjs动态属性绑定技巧应用_javascript技巧:knockoutjs 简称 ko ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性。 什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit。数据并不包括Edit属性,mvvm绑定时,会发现报错。 那么一定需要拓展ko才能达到我们的
推荐度:
标签: 绑定 js javascript
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top