监控属性

Knockout包含以下三个核心特性:

1.监控属性和依赖跟踪

2.显式绑定

3.模板

下面我们将学习这三点中的第一点,在这之前我们先研究下MVVM模式和视图模型的概念。

MVVM和视图模型

模型:用来存储应用中的数据。它处于业务领域中,并且包含了相关的属性以及操作,与用户界面独立。在使用OK时,你将经常使用ajax保持该模型与服务端同步。

视图模型:使用纯代码表示界面的数据和操作。比如,你要实现一个列表编辑功能,那么你的视图模型就需要维持一组数据项,同时还要提供添加和删除方法。

视图:能够通过可视和可交互的方式呈现视图模型。它可以显示来自视图模型中的数据,也能将用户操作的命令传递给视图模型。

当你使用了KO,你的视图只需要由简单的html文档和显式绑定就可以轻松的连接到视图模型,或者你还可以使用模板配合视图模型中的数据生成html代码。

下面我们使用KO创建一个视图模型:

你可以使用依赖绑定去创建一个非常简单的视图去呈现该视图模型。例如,下面的代码将显示personName的值:

使用knockout执行绑定

虽然data-bind并不是HTML中原生态的属性,但是它不会有任何问题。浏览器也无法知道它的含义,所以你需要使用knockout使其有效果。

下面我们将使用knockout执行绑定:

打开页面你将看到和下面的html一样的结果:

下面是关于applyBindings参数的说明:

第一个参数是你想激活依赖绑定的视图模型

第二个参数是可选的,主要是用来规定需要绑定的视图对象,比如我们可以这么写ko.applyBindings(myViewMode,document,getElementById(‘someElementId’))。

监控属性

现在你已经会创建基本的视图模型了,下面我们还要学习如何监控视图模型中的数据,从而可以在视图模型中的数据发生改变的时候将视图也改变。

下面我们将之前的视图模型改写:

现在你不需要手动保持视图的更新,这些会由knockout帮你自动更新。一旦视图模型的被监控的属性发生改变对应的视图也会随之改变。

读取和写监控属性

读取为当前命名为该属性名称的函数,不含有任何参数。

写为当前命名为该属性名的函数,并加上需要赋的值。

显式订阅监控属性事件

虽然knockout帮我们自动更新了视图,但是有时候我们需要对传入的值进行判断,那么我们就需要订阅这个事件。

下面我们可以通过subscribe进行订阅:

下面是关于该函数的参数说明:

第一个参数是指定回调的函数,第二个参数是可选的,用来指定回调函数执行的上下文,第三个参数是需要订阅的事件类型(默认为change,另一个是beforeChange)。

同时该函数还会返回一个对象,我们可以通过该返回值取消订阅,比如下面所示的代码:

Knockout默认情况下,如果赋的值跟当前属性的值相同,是不会触发change事件的,但是有时我们需要让其也能够触发,那么我们可以加上如下的代码:

延迟触发事件

笔者看到这个一时还不知道具体运用在哪,这里就顺便带以下吧,主要跟上面的方式相同,时间是毫秒:

下面是笔者的测试代码:

 <input type="text" data-bind="value: personName" />

     <script type="text/javascript">
var myViewModel = {
personName: ko.observable("Job"),
personAge: ko.observable(123)
}; //myViewModel.personName.extend({ notify: "always" }); myViewModel.personName.extend({ rateLimit: 1000 }); myViewModel.personName.subscribe(function (oldValue) {
console.log("the old value is " + oldValue);
}, null, "beforeChange"); myViewModel.personName.subscribe(function (newValue) {
console.log("the new value is " + newValue);
}); myViewModel.personName("Job"); myViewModel.personName("Job"); ko.applyBindings(myViewModel);
</script>

Knockout学习之监控属性的更多相关文章

  1. Knockout.Js官网学习(监控属性Observables)

    前言 1.创建一个ViewModel <script type="text/javascript"> //1.创建一个ViewModel var myViewModel ...

  2. 2.Knockout.Js(监控属性Observables)

    前言 1.创建一个ViewModel <script type="text/javascript"> //1.创建一个ViewModel var myViewModel ...

  3. Knockout学习之监控数组

    监控数组 单个监控属性.组合属性虽然可以解决大部分的问题,但是还有很多是他们无法做到的,比如在一组数据中进行移除添加,所以这节我们将要学习监控数组. 由于监控属性是由ko的observable构造,那 ...

  4. Knockout学习之组合监控属性

    组合监控属性 顾名思义,就是我们可以将多个属性合并为一个属性.这样在显示的时候就是整体了,并且其中任何一个属性发生改变,这个属性也都会随之发生改变从而更新视图,而这些只需要使用computed函数就可 ...

  5. Knockout 新版应用开发教程之创建view models与监控属性

    最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园Tom的Knockout指南 时隔2年了,ko更新了不少,所以文档也相应的变化了,所以 ...

  6. Knockout开发中文API系列2–创建数据模型和监控属性

    Observables,这个词的翻译来自汤姆大叔,对于部分翻译不是很准确的,欢迎大家留言,以得到更好的翻译. Knockout是建立在以下3个核心功能之上的: 1.    属性监控与依赖跟踪 2.   ...

  7. knockoutJS学习笔记04:监控属性

    一.语法介绍 先来看一个简单的例子: <span data-bind="text:name"></span> var obj = {name:ko.obse ...

  8. 【Knockout】二、监控属性Observables

    MVVM和viewModel Knockout是建立在以下三大核心功能之上的: 监控属性和依赖跟踪(Observables and dependency tracking) 声明式绑定(Declara ...

  9. Knockout应用开发指南 第二章:监控属性(Observables)

    原文:Knockout应用开发指南 第二章:监控属性(Observables) 关于Knockout的3个重要概念(Observables,DependentObservables,Observabl ...

随机推荐

  1. 部署maven的一些要点、遇到的问题和心得体会

    maven的部署.遇到的问题和心得体会 2013-10-24 | 阅:  转:  |  分享         部署maven的一些要点.遇到的问题和心得体会 (图片看不了,可以下载doc文件) 一.  ...

  2. 反向解析与PTR(Pointer Record)

    PTR记录,是电子邮件系统中的邮件交换记录的一种:另一种邮件交换记录是A记录(在IPv4协议中)或AAAA记录(在IPv6协议中).PTR记录常被用于反向地址解析. PTR记录    Pointer ...

  3. Windows Server 2012上安装.NET Framework 3.5(不需要安装光盘)

    因为在windows2012里,安装数据库,IIS部分组件都需要.NET3.5,而默认windows2012安装时,并不会把此组件复制到电脑里 导致,后期要安装.NET3.5还需要安装盘.但是,很多人 ...

  4. gNewSense 3.0 Beta 2 发布

    gNewSense 3.0 Beta 2 发布,下载地址:gnewsense-livecd-parkes-i386-3.0beta2.iso (1,078MB, MD5, torrent). 发行通知 ...

  5. 常用sql备份

    统计数据库中表格数据行数所占空间和索引情况 set nocount on exec sp_MSForEachTable @precommand=N' create table ##( id int i ...

  6. poj Dropping tests 01分数规划---Dinkelbach算法

    果然比二分要快将近一倍.63MS.二分94MS. #include <iostream> #include <algorithm> #include <cstdio> ...

  7. 【VC++积累】之八、PreTranslageMessage;TranslageMessage;GetMessage和PeekMessage的区别

    先来看windows消息机制: 首先系统(也就是windows)把来自硬件(鼠标,键盘等消息)和来自应用程序的消息 放到一个系统消息队列中去. 而应用程序需要有自己的消息队列,也就是线程消息队列,每一 ...

  8. Spring配置中的"classpath:"与"classpath*:"的区别研究

    概念解释及使用场景: classpath是指WEB-INF文件夹下的classes目录. 通常我们一般使用这种写法实在web.xml中,比如spring加载bean的上下文时,如下: <!--系 ...

  9. 《mysql技术内幕 InnoDB存储引擎(第二版)》阅读笔记

    一.mysql架构 mysql是一个单进程多线程架构的数据库. 二.存储引擎 InnoDB: 支持事务 行锁 读操作无锁 4种隔离级别,默认为repeatable 自适应hash索引 每张表的存储都是 ...

  10. postgresql共享内存的三个结构体

    本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/16105797 postgresql的共享内存维护主要 ...