监控属性(Observables)

knockout的三个核心特点:

  1.监控属性与依赖跟踪

  2.声明式绑定

  3.模板

本页,你将学习上述三个特性。但是在这之前,先了解一下MVVC模式,及 视图模型(view model)的概念。

MVVM和视图模型(View Models)

  MVVM : Model-View-View Model 是一种设计模式。它使很复杂的用户界面使用一个很简单的方式实现,它包括如下三部分:

  模型(model): 表示您的业务对象和逻辑(例如:银行账号汇款),这是和你的UI独立的部分。使用KO的时候,需要调用Ajax调用服务端方法读取或写入数据。

  视图模型(view model):UI层面的数据和操作的代码表示。例如,编辑一个列表,view model是一个list对象,并且会有add、remove项的操作。

注意,这个HTML界面是不同的,它只保存临时的前端数据(非持久化),view model只是纯粹的JS对象。

视图(view):KO里,视图可以理解就是HTML。(其他啰嗦的一堆没有翻译)。

使用KO创建view model,就是声明一个JS对象:

var myViewModel = {
    personName: 'Bob',
    personAge: 123
};

创建view:

The name is <span data-bind="text: personName"></span>

激活Knockout

data-bindHTML并不识别(它严格遵从HTML5语法, 虽然HTML4验证器提示有不可识别的属性但依然可用),由于浏览器不识别它是什么意思,需要在加入如下JS:

ko.applyBindings(myViewModel);

这个需要在文档一加载完成后就执行,可以写在HTML的最后,也可以使用JQuery的$。

这样做完之后,HTML等效于:

The name is <span>Bob</span>

applyBindings的参数说明:

  第一个参数:view model

  第二个参数:可选的,一个DOM对象。 如果指定这个参数,将会限定绑定行为只发生在这个DOM的范围及子元素内。

  如:ko.applyBindings(myViewModel, document.getElementById('someElementId'))。

  好处是你可以在同一个页面声明多个view model,用来区分区域。

监控属性(Observables)

上述已经创建了简单的view model,以及把它显示在界面上。 但KO的核心是当view model改变时自动更新界面。这要怎么做呢?答案是使用observables。

例如,重写上面的例子:

view model:

var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};

view 不用改。这时,当view model的值改变时,界面就会自动更改内容了。

读取、更改监控属性(observables)

  读取:myViewModel.personName() 返回 'Bob', and myViewModel.personAge() 返回 123.

  更改值:myViewModel.personName('Mary')

  一次改变多个值:myViewModel.personName('Mary').personAge(50)

监控属性(observables)的特征就是监控(observed),例如其它代码可以说我需要得到对象变化的通知,所以KO内部有很多内置的绑定语法。所以如果你的代码写成data-bind="text: personName", text绑定注册到自身,一旦personName的值改变,它就能得到通知。

当然调用myViewModel.personName('Mary')改变name的值,text绑定将自动更新这个新值到相应的DOM元素上。这就是如何将view model的改变传播到view上的。

监控属性(Observables)的显式订阅(Explicitly subscribing to observables)

通常情况下,你不用手工订阅,所以新手可以忽略此小节。高级用户,如果你要注册自己的订阅到监控属性(observables),你可以调用它的subscribe 函数。例如:

myViewModel.personName.subscribe(function(newValue) {
alert("The person's new name is " + newValue);
});

subscribe函数参数:

  callback 是一个funcation,当值改变时调用

  target(可选),是callback函数中的this值

  event(可选) 事件的名称,默认是change

这个subscribe 函数在内部很多地方都用到的。你也可以终止自己的订阅:首先得到你的订阅,然后调用这个对象的dispose函数,例如:

var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });
// ...then later...
subscription.dispose(); // I no longer want notifications

如果你要在值改变前得到通知,可以使用beforeChange这个event,例如:

myViewModel.personName.subscribe(function(oldValue) {
alert("The person's previous name is " + oldValue);
}, null, "beforeChange");

注意:knockout不保证beforeChange和change一定成对出现。(后面的没看懂,大概意思是:)如果需要跟踪改变前的值,需要另外实现对值的跟踪。

强迫监控行为一直发生(Forcing observables to always notify subscribers)

一般情况下,当值改变时,KO会捕获到变化,并实施跟踪。但是当值更改前后一样时,这个通知是不会发出的,此时可以使用extender来确保这个通知一直发生,例如:

myViewModel.personName.extend({ notify: 'always' });

延时 并且/或 抑制 监控属性改变后的通知(Delaying and/or suppressing change notifications)

一般情况下,一但值改变了,监控属性的通知就会马上触发。但是在某些情况下(如改变是重复的,或者处理值的改变的开销比较大),需要延后或者是限制通知产生。此时可以使用rateLimit这个扩展,例如:

// Ensure it notifies about changes no more than once per 50-millisecond period
myViewModel.personName.extend({ rateLimit: 50 });

knockout.js-创建视图模型的更多相关文章

  1. Knockout v3.4.0 中文版教程-2-监控-通过监控创建视图模型(上)

    2. 监控 1.通过监控创建视图模型 1. 监控 Knockout是基于以下三个核心特性: 监控和依赖跟踪 声明式绑定 模板 在本节,你将第一次了解这三个特性,在这之前,我们先来了解以下MVVM模式和 ...

  2. 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

    原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...

  3. Knockout v3.4.0 中文版教程-3-监控-通过监控创建视图模型(下)

    6. 显式订阅监控 你通常不需要手动设置订阅,所以初学者应该跳过这一节. 对于高级用户,如果你想注册自己的订阅来监控通知变化,你可以使用 subscribe函数,比如: myViewModel.per ...

  4. Knockout.js 数据验证之插件版和无插件版

    本文我们将介绍使用 Knockout.js 实现一些基本的数据验证.就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法. 使用自定义方法,不需要任何插件 最简单的方法是使用已有的插件 如果你 ...

  5. knockout.js

    最近在使用knockout这个JS的MVVM模型,真的很不错,每次去查英文的文档,的确很累的,抽空的时候就把看到的文档按自己的理解翻译一下.当然我不是逐字的翻译. knockout的官方说明:http ...

  6. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第三章:搜索、高级过滤和视图模型

    在这一章中,我们首先添加一个搜索产品的模块以增强站点的功能,然后使用视图模型而不是ViewBag向视图传递复杂数据. 注意:如果你想按照本章的代码编写示例,你必须完成第二章或者直接从www.apres ...

  7. Thinkphp 视图模型

    1.创建视图模型 2.定义视图模型 class BlogViewModel extends ViewModel { public $viewFields = array( 'Blog'=>arr ...

  8. MVC无限级分类01,分层架构,引入缓存,完成领域模型与视图模型的映射

    本系列将使用zTree来创建.编辑关于品牌.车系.车型的无限级分类,使用datagrid显示,源码在github.先上最终效果: datagrid显示所有记录.分页,提供添加.修改.删除按钮,并提供简 ...

  9. ABP入门教程9 - 展示层实现增删改查-视图模型

    点这里进入ABP入门教程目录 创建视图模型 在展示层(即JD.CRS.Web.Mvc)的Models下新建文件夹Course //用以存放Course相关视图模型 在JD.CRS.Web.Mvc/Mo ...

随机推荐

  1. hdu1031

    #include <cstdio> #include <cstdlib> struct element{ int id; double sa; }e[10000]; int c ...

  2. JavaScript基础(更新第二波)

    下面接着说JavaScript打开新的窗口. open()方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL]),[窗口名称],[参数字符串] 参数说明: URL ...

  3. liunx环境C、C++代码编译链接中间代码主要流程

    一个比较小的问题,可以直接看帖子: http://blog.csdn.net/gengyichao/article/details/6544266

  4. GOPS2017全球运维大会 • 深圳站 历届金牌讲师精选亮相

    GOPS2017全球运维大会 • 深圳站将于2017年4月21日-22日在深圳举行,GOPS2017报名平台:活动家! 快捷报名通道:http://www.huodongjia.com/event-2 ...

  5. Java 并发 关键字volatile

    Java 并发 关键字volatile @author ixenos volatile只是保证了共享变量的可见性,不保证同步操作的原子性 同步块 和 volatile 关键字机制 synchroniz ...

  6. 正确的IP地址正则表达式

    ((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)

  7. Java基础第二章

  8. ngrok内网穿透神器

    ngrok类似国内的花生壳,可以将本地的内网映射到公网上,这样就可以做web开发,微信开发了.下面就介绍下ngrok是怎么配置的吧. 方式一: 一.打开ngrok的官网https://ngrok.co ...

  9. python 学习 [day8]class成员

    一.类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对 ...

  10. 2015 asia xian regional F Color (容斥 + 组合数学)

    2015 asia xian regional F Color (容斥 + 组合数学) 题目链接http://codeforces.com/gym/100548/attachments Descrip ...