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

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'}
呈现：

赞 (0)

相关推荐

  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

    BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

    Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得

  • KnockoutJS 3.X API 第四章之表单value绑定

    KnockoutJS 3.X API 第四章之表单value绑定

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护. 重要特性: 优雅的依赖追踪 - 不管任何时候你的数据模型更新,都会自动更新相应的内容. 声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上. 轻易可扩展 - 几行代码就可以实现自定义行为作为新的声明式绑定. 额外的好

  • Bootstrap与KnockoutJs相结合实现分页效果实例详解

    Bootstrap与KnockoutJs相结合实现分页效果实例详解

    KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题--如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用Knockou

  • KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护. submit绑定目的 submit绑定即为提交绑定,通常用于form元素.这种绑定方式会打断默认的提交至服务器的操作.转而提交到你设定好的提交绑定回调函数中.如果要打破这个默认规则,只需要在回调函数中返回true即可. 例如: <form

  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    BootstrapTable与KnockoutJS相结合实现增删改查功能【二】

    在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能[一],介绍了下knockout.js的一些基础用法.接下来通过本文继续给大家介绍.如果你也打算用ko去做项目,且看看吧! Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css.只要在标签中加上合适的属性即可. KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己

  • Knockoutjs快速入门(经典)

    Knockoutjs快速入门(经典)

    Knockoutjs是一个JavaScript实现的MVVM框架.主要有如下几个功能: 1. Declarative bindings 2. Observables and dependency tracking 3. Templating 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用.闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定. 1.基本绑定和依赖跟踪 首先需要定义一个ViewModel: 复制代码 代码如下: <script type=

  • Knockoutjs的环境搭建教程

    最近要在项目中使用Knockoutjs,因此今天就首先研究了一下Knockoutjs的环境搭建,并进行了一个简单的测试. 首先要到http://knockoutjs.com/index.html下载最新版本的Knockoutjs,笔者这里下载的是knockout-2.2.0.js.然后新建一个.html文件,在html文档中加入以下的语句导入此js: <script type="text/javascript" src="knockout-2.2.0.js"&

  • KnockoutJS 3.X API 第四章之事件event绑定

    目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me 源码: <div> <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div data-bind="visibl

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

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

    knockoutjs 简称 ko ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性. 什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit.数据并不包括Edit属性,mvvm绑定时,会发现报错. 那么一定需要拓展ko才能达到我们的目的. 首先来认识有值属性绑定,和 无值属性绑定: 一.有值属性绑定: JS模型: 复制代码 代码如下: $(function () { var viewModel = function () { var sel

  • KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

    if绑定目的 if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值,当非空字符串时则为真),if绑定的作用与visible绑定的作用类似.可控制DOM的显示与隐藏,不一样的地方是,if绑定是物理删除或添加DOM元素. 示例1 该例展示IF绑定的动态删除添加DOM: Display message UI源码: <label><input type="checkbox" data-bind=&qu

  • KnockoutJS 3.X API 第四章之click绑定

    目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked 0timesClick me 源码: <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter&q

  • Knockoutjs 学习系列(一)ko初体验

    Knockoutjs 学习系列(一)ko初体验

    MVVM框架中Angular是好,但这么大而全的框架,学习难度可不低呢,上手起码也得要个一两周吧.而knockoutjs专注于数据绑定,只需一两天就可以投入使用了,学习成本不要太低!在前端进化如此迅速的时代,学习成本也是不得不考虑的一个因素.很多时候其实我们的项目并没那么复杂,也并不需要万能的框架,更需要的反而是简单顺手的工具. Before Knockoutjs 假设我们做一个订单系统,需要显示商品单价,然后可以根据输入数量计算出总价并显示出来.使用原生代码也很容易实现,效果: 代码如下: <

  • WebApi+Bootstrap+KnockoutJs打造单页面程序

    WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App

  • 改进性能和样式的 24个 ASP 技巧第1/2页

    祥细内容: 简介 技巧 1:在 Web 服务器上缓存常用数据 技巧 2:在 Application 或 Session 对象中缓存常用数据 技巧 3:在 Web 服务器磁盘上缓存数据和 HTML 技巧 4:避免在 Application 或 Session 对象中缓存非灵活组件 技巧 5:不要在 Application 或 Session 对象中缓存数据库连接 技巧 6:妙用 Session 对象 技巧 7:在 COM 对象中封装代码 技巧 8:晚点获取资源,早点释放资源 技巧 9:进程外的执行

  • 改进性能和样式的24个ASP 技巧

    简介 技巧 1:在 Web 服务器上缓存常用数据 技巧 2:在 Application 或 Session 对象中缓存常用数据 技巧 3:在 Web 服务器磁盘上缓存数据和 HTML 技巧 4:避免在 Application 或 Session 对象中缓存非灵活组件 技巧 5:不要在 Application 或 Session 对象中缓存数据库连接 技巧 6:妙用 Session 对象 技巧 7:在 COM 对象中封装代码 技巧 8:晚点获取资源,早点释放资源 技巧 9:进程外的执行将牺牲可靠性

  • Java代码生成器的制作流程详解

    1. 前言 前几天写了篇关于Mybatis Plus代码生成器的文章,不少同学私下问我这个代码生成器是如何运作的,为什么要用到一些模板引擎,所以今天来说明下代码生成器的流程. 2. 代码生成器的使用场景 我们在编码中存在很多样板代码,格式较为固定,结构随着项目的迭代也比较稳定,而且数量巨大,这种代码写多了也没有什么技术含量,在这种情况下代码生成器可以有效提高我们的效率,其它情况并不适于使用代码生成器. 3. 代码生成器的制作流程 首先我们要制作模板,把样板代码的固定格式抽出来.然后把动态属性绑定

  • Vue 2.0 基础详细

    目录 1.特点 2.实例 3.选项 Options 4.基本语法 5.生命周期 6.路由管理Vue-Router 6.1 路由配置 6.2 路由跳转 6.3 路由守卫 7.状态管理器Vuex 7.1 配置 8.五大核心属性 9.Http请求库Axios 1.特点 是一个MVVM框架 由MVC架构衍生,分为View(视图层).ViewModel(数据视图层).Model(数据层),MVVM 最标志性的特性就是 数据绑定,实现数据驱动视图,视图同步数据. 数据也是单向的,称之为单向数据流 数据总是从

  • vue3的父传子问题(单项数据流)

    目录 vue3父传子(单项数据流) vue3 父子传参 简单易懂 父传子 子传父 vue3父传子(单项数据流) 父组件通过属性绑定传递数据 子组件内部通过props接收数据 基本数据类型---改变父组件的数据--只改变了 父组件的的数据在子组件的显示 通过动态属性绑定 传递list给子组件 在子组件内部修改父组件的复杂数据类型的数据---可以修改 vue3 父子传参 简单易懂 父传子 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 在这里为了大家区分我将父

随机推荐