ko knockoutjs动态属性绑定技巧应用
2019-09-23 08:46:39来源:爱站网 阅读 ()
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注册页面的简单实例
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- JS批量操作CSS属性详细解析 2020-02-29
- jQuery表单对象属性过滤选择器实例详解 2020-02-21
- jQuery如何动态添加小广告 2020-02-20
- JS动态加载脚本的方法 2020-02-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash