2. 监控

1.通过监控创建视图模型

1. 监控

Knockout是基于以下三个核心特性:

  1. 监控和依赖跟踪
  2. 声明式绑定
  3. 模板

在本节,你将第一次了解这三个特性,在这之前,我们先来了解以下MVVM模式视图模型的概念。

2. MVVM和视图模型

Model-View-View Model (MVVM)是一种构建用户界面的设计模式。它描述了如何将存在复杂性的UI简单地分成三个部分:

  • 模型:用于你的应用程序存储数据。数据被表现为对象在你的业务逻辑里面进行操作(比如,银行账户可以进行转账业务)而且是和任何UI无关联。当你使用KO,你通常会使用Ajax调用一些服务端的代码来读写用于存储的数据模型。
  • 视图模型:在UI上的数据和操作的纯代码表示,比如,如果你想实现一个列表编辑器,你的视图模型会是一个带有一个列表项的对象,而且会暴露出添加项和移除项的方法。
  • 视图:一个表示视图模型状态的可视化的、可交互的UI界面。它显示来自视图模型的信息,传递命令给视图模型(比如,当用户点击按钮的时候),同时当视图模型无论何时发生改变的时候自动更新。

使用了KO以后,你的视图即HTML文档通过声明式绑定语法关联到视图模型,因此看起来很简单。另外,你可以通过模板使用来自视图模型的数据生成HTML。

要用KO创建一个视图模型,只要任意定义个一个javascript对象,比如

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

然后你可以使用声明式绑定语法创建一个非常简单的视图模型的视图。比如,下面的标记显示personName的值:

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

3. 激活Knockout绑定

data-bind属性并不是html原生属性,尽管它是完全正确的(它是完全兼容HTML5,在HTML4里面也没有问题,尽管会被语法验证器指出这是未被规范承认的属性)。正因为浏览器不知道它代表什么,你需要激活Knockout来让该属性生效。

要激活Knockout,在<script>标签块之间添加如下内容:

ko.applyBindings(myViewModel);

你既可以把js代码放在你的html文档的底部,也可以通过DOM-ready处理函数如jQuery的$函数来包裹内容,然后放在顶部。

就是这样,现在你的视图看起来就像你写了下面的html内容后呈现的一样:

The name is <span>Bob</span>

这个时候如果你肯定很好奇要给 ko.applyBindings 传递什么参数

  • 第一个参数表示你要用什么视图模型对象来激活声明式绑定。
  • 你可以传递第二个可选参数来定义你想绑定文档中哪一部分的data-bind属性。比如,ko.applyBindings(myViewModel, document.getElementById('someElementId'))。这个限定了只激活ID为someElementId元素和子元素,当你想要多个视图模型关联页面中不同区域的时候非常有用。

很简单,真滴。

4. Observable方法

好了,你已经明白怎样创建一个基本的视图模型和怎样使用绑定来显示其中的一个属性。但是KO一个重要的好处是当你的视图模型改变的时候自动更新UI内容。KO怎么知道你的视图模型什么时候改变?答案是你需要通过observable来定义你的模型属性,因为这些特殊的javascript对象可以通知订阅者发生了什么改变,并能自动检测依赖。

比如,把前面的视图模型改为如下:

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

你完全不需要改变视图,一样的data-bind语法会正常工作。不同在于现在有能力检测改变,当发生了改变,会自动改变视图。

5. 读写observable的值

不是所有的浏览器支持javascript的getters和setters(比如,IE)属性,为了兼容性,ko.observable返回的对象实际上是函数。

  • 获取监控对象当前值,只要无参调用observable方法即可。比如,myViewModel.personName() 会返回'Bob', 而 myViewModel.personAge()会返回123.
  • 设置监控对象的值,调用observable方法同时把要设置的值作为参数传入。比如,calling myViewModel.personName('Mary')会改变name的值为'Mary'
  • 设置模型对象上的多个监控属性值,你可以使用链式语法。比如,myViewModel.personName('Mary').personAge(50) 会改变name值为'Mary'age值为50.

observables的整个关键点就是他们可以被监控,换句话说,其他的代码想要被告知它发生了变化。这就是许多KO内置绑定实际上做的事情。所以,当我们写data-bind="text: personName",text绑定注册自己可被通知,当personName改变( 假设它现在是一个监控值)。

Knockout v3.4.0 中文版教程-2-监控-通过监控创建视图模型(上)的更多相关文章

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

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

  2. Knockout v3.4.0 中文版教程-6-计算监控-可写的计算监控

    2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值 ...

  3. Knockout v3.4.0 中文版教程-8-计算监控-纯计算属性

    4.纯计算属性 纯计算监控在KO 3.2.0中开始引入,比大多数应用程序使计算监控有更大的性能提升和内存优化.这是因为在自身没有订阅的时候不会保持订阅状态.特性如下 阻止内存泄露 - 避免在应用程序里 ...

  4. Knockout v3.4.0 中文版教程-16-控制流-foreach绑定

    2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进 ...

  5. Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定

    5. style绑定 目的 style绑定用来给关联的DOM元素添加或移除一个或多个样式值.在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变. (注意:如果你不 ...

  6. Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定

    4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...

  7. Knockout v3.4.0 中文版教程-15-控制文本内容和外观-attr绑定

    6. attr绑定 目的 attr绑定可以给关联DOM元素的任何属性赋值.这个绑定很棒,比如,当你想要设置通过视图模型给元素的title属性.img标签的src属性或超链接的href值,当视图模型对应 ...

  8. Knockout v3.4.0 中文版教程-12-控制文本内容和外观-html绑定

    3. html绑定 目的 html绑定会使关联的DOM元素显示你参数指定的html内容. 当你的视图模型里面的值是HTML标记字符串,而你想要呈现它,这时候用html绑定特别合适. 例子 <di ...

  9. Knockout v3.4.0 中文版教程-5-计算监控-使用计算监控

    3. 计算监控 1.使用计算监控 如果你有一个监控的属性firstName和另一个lastName,但你想显示全名怎么办? 这就是引入计算监控的原因-这是依赖于一个或多个其他的observables函 ...

随机推荐

  1. css未知宽度水平居中整理

    1.text-align 兼容性很好 .wp {text-align: center;} .test {display: inline;} <ul class="wp"> ...

  2. 使用express+mongoDB搭建多人博客 学习(2)路由与模板

    修改index.js路由规则: var express = require('express'); var router = express.Router(); /* GET home page. * ...

  3. 06.Javascript——入门this的用法(难点)

    this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 1.作为普通函数调用 当函数作为一 ...

  4. [转]Cordova android框架详解

    本文转自:http://www.cnblogs.com/hubcarl/p/4202784.html 一.Cordova 核心java类说明 CordovaActivity:Cordova Activ ...

  5. [转]如何降低SQL Server 内存使用率

    我的数据库服务器内存为8G,现在资源管理器显示内存用到5G,可以肯定是sql server数据库吃内存原因. MSSQL占用了太多的内存,而且还不断的增长:或者说已经设置了使用内存,可是它没有用到那么 ...

  6. IBatis.net特性展示代码

    最近公司计划设计新业务平台架构.数据访问层框架要使用ibatis.net.头让我做些例子给其他同事演示下 ibatis的基本特性.然后评估下看是否使用.本来以后上官方下载NPetshop演示下就行了那 ...

  7. LPCTSTR和CString的关系

    类型理解 LPCTSTR类型: L表示long指针 这是为了兼容Windows 3.1等16位操作系统遗留下来的,在win32中以及其他的32位操作系统中, long指针和near指针及far修饰符都 ...

  8. ios has denied the launch request.

    ios has denied the launch request. You can choose either of the two ways. Solution 1: Open System Pr ...

  9. IOS命名

    NS开头的名称不要出现. NS系统名称开头. 命名缩写只用于通用专业术语,如URL,不可自创命名缩写,如Ctr.Msg.命名宁可长一些,也不要难于理解. 是否在看别人代码时各种缩写而不知其所以然?简短 ...

  10. Ubuntu16.04下使用sublime text3搭建Python IDE

    本来是想用pycharm,但你看它的内存要求,我的虚拟机一共也就1G Vim太别扭了,就算有代码颜色,不能自动对齐,不能规范格式,跳转到函数定义,显示文档,要配置起来太费劲,所以就尝试着用sublim ...