knockout.js-创建视图模型
监控属性(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-创建视图模型的更多相关文章
- Knockout v3.4.0 中文版教程-2-监控-通过监控创建视图模型(上)
2. 监控 1.通过监控创建视图模型 1. 监控 Knockout是基于以下三个核心特性: 监控和依赖跟踪 声明式绑定 模板 在本节,你将第一次了解这三个特性,在这之前,我们先来了解以下MVVM模式和 ...
- 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...
- Knockout v3.4.0 中文版教程-3-监控-通过监控创建视图模型(下)
6. 显式订阅监控 你通常不需要手动设置订阅,所以初学者应该跳过这一节. 对于高级用户,如果你想注册自己的订阅来监控通知变化,你可以使用 subscribe函数,比如: myViewModel.per ...
- Knockout.js 数据验证之插件版和无插件版
本文我们将介绍使用 Knockout.js 实现一些基本的数据验证.就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法. 使用自定义方法,不需要任何插件 最简单的方法是使用已有的插件 如果你 ...
- knockout.js
最近在使用knockout这个JS的MVVM模型,真的很不错,每次去查英文的文档,的确很累的,抽空的时候就把看到的文档按自己的理解翻译一下.当然我不是逐字的翻译. knockout的官方说明:http ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第三章:搜索、高级过滤和视图模型
在这一章中,我们首先添加一个搜索产品的模块以增强站点的功能,然后使用视图模型而不是ViewBag向视图传递复杂数据. 注意:如果你想按照本章的代码编写示例,你必须完成第二章或者直接从www.apres ...
- Thinkphp 视图模型
1.创建视图模型 2.定义视图模型 class BlogViewModel extends ViewModel { public $viewFields = array( 'Blog'=>arr ...
- MVC无限级分类01,分层架构,引入缓存,完成领域模型与视图模型的映射
本系列将使用zTree来创建.编辑关于品牌.车系.车型的无限级分类,使用datagrid显示,源码在github.先上最终效果: datagrid显示所有记录.分页,提供添加.修改.删除按钮,并提供简 ...
- ABP入门教程9 - 展示层实现增删改查-视图模型
点这里进入ABP入门教程目录 创建视图模型 在展示层(即JD.CRS.Web.Mvc)的Models下新建文件夹Course //用以存放Course相关视图模型 在JD.CRS.Web.Mvc/Mo ...
随机推荐
- hdu1033
#include<stdio.h> #include<string.h> const int MAXN=200; char str[MAXN]; int main() { in ...
- 技能学习经验与C语言学习调查
技能学习经验与C语言学习调查 前言 要说的话,这还是我第一次写博客.不论是为了作业也好,为了将来的学习工作也好,写博客都是必不可少的,也算是个自我提升的途径吧.不过第一次写博客,就用从来没听说过的ma ...
- ajax中的stasus错误详解
一.英文版解析 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loading) the send( ) met ...
- springmvc集成aop记录操作日志
首先说明一下,这篇文章只做了记录日志相关事宜 具体springmvc如何集成配置aop对cotroller进行拦截,请看作者的另一篇文章 http://www.cnblogs.com/guokai87 ...
- XCODE 控件连接(关联)不上变量 怎么解决
一个很低级的错误,原因就在于控件所属的UIViewController没有设置对应的CLASS, 即变量所属的class, 设置好即可解决. 解决办法: alt + command + 3进入身份检查 ...
- 获取控件id
普通状态中JS获取控件IDdocument.getElementById('controlID'); JS获取父窗口控件IDwindow.parent.document.getElementById( ...
- Java代码之输出参数和(强制类型转换)
说明(因为Java中java Application的参数都是默认的字符型的数据,所以需要强制类型转换这一步骤) 设计思想: 向系统里输入若干个参数,计算出参数个数,利用for语句计算出参数的和.(程 ...
- STL容器小结
1.空间分配器 std::alloc用于容器中内存空间的分配和释放,以及分配内存的管理.construct().destroy()等全局函数用于为对象的构造和析构. 2.迭代器和trains 迭代器 ...
- CBC之php java兼容版本
网上搜了N多代码,都是你抄我的,我抄你的,着实让人无语对苍天.经过多番资料的查找,php与java的cbc加密.解密结果终于一致了,代码如下: Java加密解密类: package main; imp ...
- java基础之操作符
一:赋值 1.对基本数据类型的赋值,int a=b: //把b的值复制给a,如果修改了a的值,b 的值不会受到影响. 2.对引用类型的赋值, public class Text { public ...