KO是什么?

KO不是万能的,它的出现主要是为了方便的解决下面的问题:

  • UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态、样式等属性?
  • UI元素之间关系比较紧密,比如操作一个元素,需要改变另外一个元素的状态?
  • DOM元素与Js对象之间的数据同步?
  • 前端javascript代码组织不理想?用户输入数据校验、DOM操作、后台交互…,交织在一起?

基础概念一:viewModel

  • 负责处理UI事件的响应,响应用户操作。
  • 负责保存领域模型在前端的变体Model’,比如:Student模型,在UI元素与Model之间同步数据(用户修改input-->ko修改model,反之亦然)
  • 在需要的时候,可以使用Helper方法轻松地从viewModel中剥离出需要传递给Server的数据,通过ajax方式与后台交互。
  • 负责接收Server端发送过来的数据(可能是Ajax请求),更新模型数据,同时更新UI展现。

基础概念二:Observable与computed

纵观KO的所有应用场景,基本上这2个属性至少会用到一个。个人认为这是KO最常使用的东西。他们用法如下:

  • Observable(监控属性):监控自身属性的变化,向外部发送通知。外部通过subscribe方法来订阅属性的变化事件。
  • Computed(依赖属性):在早期版本中叫做dependentObservable,它通常依赖于其他的Observable,通过计算得出自己的数据。当依赖项改变的时候,computed属性会接到通知,然后同步更新自身

*这里提2点:

  • 虽然本文称之为“属性”,但是本质上他们是js的function对象,所以访问的时候需要加()号
  • 默认情况下Computed的同步发生在任意的Observable变化的时候,可是某些情况下我们可能不希望它更新的如此频繁,比如用户正在输入的过程中。KO有其他办法来延迟更新,在本系列后面会有专门文章介绍。

本章的重点就是讲解这2个基本属性的用法,在后面的“实例讲解”中会详细说明。

如何激活KO绑定

KO中,绑定是需要激活的,可以理解为把viewModel的数据与Html文档的DOM元素进行分析和关联

通常是在页面元素、viewModel数据加载完毕之后,就可以激活绑定了。当然你可以在任何时候你想进行绑定的时候来激活。

只需要下面的代码:

var model = new AppViewModel();//实例化一个viewModel
ko.applyBindings(model); //绑定到整个页面

这样KO会在整个Body中寻找需要进行绑定的元素,与viewModel进行绑定。当然你也可以指定绑定的根节点,这样的好处:

  1. 可以缩小KO查找绑定的范围(毕竟不是整个页面都需要进行binding)

  2. 可以同时使用多个viewModel,分别负责不同区域的绑定(是不是你想要的?haha…)

很简单,加一个参数即可:

var model = new AppViewModel();
ko.applyBindings(model, document.getElementById("Demo1")); //Demo1可能是一个Div

实例讲解:Observable

基本语法

1、定义

var myViewModel = {
personName: ko.observable('Bob'),//定义叫做personName的监控属性
personAge: ko.observable(123)//定义叫做personAge的监控属性
};

2、读取

var a=myViewModel.personName();//a为'Bob'

3、写入、连续写入(链式调用)

myViewModel.personName('Mary').personAge(50);//同时修改了2个属性值

4、订阅属性修改事件

myViewModel.personName.subscribe(function(newValue) {
alert("The person's new name is " + newValue);
}); myViewModel.personName('换个名字');//这时候会弹出alert

Knockout-了解Observable与computed的更多相关文章

  1. Knockout 新版应用开发教程之Observable与computed

    KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...

  2. Knockout 新版应用开发教程之Computed Observables

    Computed Observables 如果你有监控属性firstName和lastName的话,此时如果你想要显示全名? 这个时候computed(以前叫做依赖)监控属性就出马了,这是一个函数用来 ...

  3. 翻译:Knockout 快速上手 - 4: 你需要知道的顶级特性

    Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何其他的脚本库 ( 甚至 ...

  4. 翻译:Knockout 快速上手 - 3: knockoutJS 快速上手

    许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用,库存管理应用. 应用概览 在创建我们的应用之前,我们需要一个公司,来理解应 ...

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

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

  6. Knockoutjs官网翻译系列(四) computed中依赖追踪是如何工作的

    初学者无需了解这些 ,但是很多高级程序员想知道我们为什么可以保持跟踪这些依赖以及可以正确的更新到UI中.它其实很简单.跟踪算法是这样的: 无论何时你定义了一个computed observable,K ...

  7. Knockout 可扩展性

    你需要知道的顶级特性 Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何 ...

  8. (一)Knockout 计算属性

    1 Computed 首先,创建一个view model如下: <body> <p>The fullname is: <span data-bind="text ...

  9. 翻译:Knockout 快速上手 - 5: 你需要知道的顶级特性 续

    Utilities Knockout 提供了许多可以你开发中使用的工具,你可以在 ko.utils 命名空间中找到它们,我最喜欢的工具如下所示: extend: 这个方法将两个对象合并在一起,调用这个 ...

随机推荐

  1. 类的加载、时机、反射、模板设计、jdk7/jdk8新特性(二十六)

    1.类的加载概述和加载时机 * A:类的加载概述 * 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. * 加载 * 就是指将class文 ...

  2. [Selenium] waitUntilAllAjaxRequestCompletes

    private static final String JQUERY_ACTIVE_CONNECTIONS_QUERY = "return $.active == 0;"; pri ...

  3. Hadoop学习资料(持续更新)

    Alex的Hadoop菜鸟教程 Hadoop资料合集 Hadoop平台和应用程序框架

  4. 【转】Chrome调试鼠标悬停后出现的元素

    原文地址:https://blog.csdn.net/sparrowflying/article/details/80996550 调试小技巧:调试样式的时候,有一类元素是鼠标悬停在特定位置才会出现的 ...

  5. 【旧文章搬运】从PEB获取内存中模块列表

    原文发表于百度空间,2008-7-25========================================================================== PEB中的L ...

  6. CS231n 2016 通关 第一章-内容介绍

    第一节视频的主要内容: Fei-Fei Li 女神对Computer Vision的整体介绍.包括了发展历史中的重要事件,其中最为重要的是1959年测试猫视觉神经的实验. In 1959 Harvar ...

  7. JDK7中匿名内部类中使用局部变量要加final,JDK8中不需要,但jdk会默认加上final

    今天看书的时候看到了局部内部类,书上说局部内部类可以访问局部变量,但是必须是final的.因为局部变量在方法调用之后就消失了,使用final声明的话该局部变量会存入堆中,和内部类有一样的声明周期.但是 ...

  8. Ruby主要方法

         方法定义        def hello(name) ...  end                                                函数名 参数 作用 备 ...

  9. C++笔试题库之编程、问答题 150~200道

    151.写出判断ABCD四个表达式的是否正确, 若正确, 写出经过表达式中 a的值 int a = 4; (A)a += (a++); (B) a += (++a) ;(C) (a++) += a;( ...

  10. Unity局部高效实时阴影的思考和实现

    http://game.ceeger.com/forum/read.php?tid=23305&fid=2 无意间看到一篇文章,说是Unity5 demo中为了实现角色的良好阴影,单独给角色设 ...