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

 更新时间:2012年11月14日 11:27:20   作者:   我要评论
ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性,本文将详细介绍,需要的朋友参考下
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>

呈现:
 
二、无值属性绑定
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'}
呈现:

相关文章

  • 关于layui 实现点击按钮添加一行(方法渲染创建的table)

    关于layui 实现点击按钮添加一行(方法渲染创建的table)

    今天小编就为大家分享一篇关于layui 实现点击按钮添加一行(方法渲染创建的table),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 鼠标左键单击冲突的问题解决方法(防止冒泡)

    鼠标左键单击冲突的问题解决方法(防止冒泡)

    一个页面实现了两种右键菜单,当鼠标左键单击空白处时,右键菜单并不隐藏,下面为大家解决鼠标左键单击冲突的问题
    2014-05-05
  • JS实现隐藏同级元素后只显示JS文件内容的方法

    JS实现隐藏同级元素后只显示JS文件内容的方法

    这篇文章主要介绍了JS实现隐藏同级元素后只显示JS文件内容的方法,可实现将与js文件的同级元素全部隐藏,只显示js文件内容的功能,涉及javascript针对页面元素的遍历与属性修改相关技巧,需要的朋友可以参考下
    2016-09-09
  • Bootstrap表单使用方法详解

    Bootstrap表单使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap表单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript定时器制作弹窗小广告

    JavaScript定时器制作弹窗小广告

    这篇文章主要为大家详细介绍了JavaScript定时器制作一个弹窗小广告,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 用函数式编程技术编写优美的 JavaScript_ibm

    用函数式编程技术编写优美的 JavaScript_ibm

    函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现,函数式编程变得更加流行。一些传统的编程语言,例如 C++ 和 JavaScript,引入了由函数式编程提供的一些构造和特性。在许多情况下,JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程,就可以避免这些问题。此外,可以利用函数式编程风格编写更加优美的回调。
    2008-05-05
  • 逻辑表达式中与或非的用法详解

    逻辑表达式中与或非的用法详解

    这篇文章主要介绍了逻辑表达式中与或非的用法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • javascript操作select元素实例分析

    javascript操作select元素实例分析

    这篇文章主要介绍了javascript操作select元素的方法,可实现针对select元素选中元素时动态改变html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 微信小程序开发之实现自定义Toast弹框

    微信小程序开发之实现自定义Toast弹框

    Toast相信对于利用微信小程序开发的朋友们来说都不陌生,有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了。有一个插件可以直接帮我们完成WeToast,这篇文章主要给大家介绍了微信小程序开发之实现自定义Toast弹框的相关资料,需要的朋友可以参考下。
    2017-06-06
  • ES6的解构赋值实例详解

    ES6的解构赋值实例详解

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这篇文章主要介绍了ES6的解构赋值的实例代码 ,需要的朋友可以参考下
    2019-05-05

最新评论