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 });
时间: 2024-07-29 05:48:05

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

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

注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. Part 5: Creating a Dynamic UI with Knockout.js 第5部分:用Knockout.js创建动态UI 本文引自:http://www.asp.net/web-api/overview/creating-web-apis/using-web-api-with-entity-framework/using-web-api-with-entity-fra

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

本文我们将介绍使用 Knockout.js 实现一些基本的数据验证.就如我们在标题里提到的,我们会使用两种方法来创建数据验证方法. 使用自定义方法,不需要任何插件 最简单的方法是使用已有的插件 如果你刚刚接触 Knockout.js,强烈建议你阅读我之前的 文章,那篇文章中我分享了一些关于 Knockout.js 的基本知识.本文我们使用 Visual Studio 进行开发,希望你能喜欢.现在开始. 源码下载 Knockout.js Validations 第 1 段(可获 1.23 积分)

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

在这一章中,我们首先添加一个搜索产品的模块以增强站点的功能,然后使用视图模型而不是ViewBag向视图传递复杂数据. 注意:如果你想按照本章的代码编写示例,你必须完成第二章或者直接从www.apress.com下载第二章的源代码. 3.1 添加产品搜索 为了执行产品搜索,我们将添加一些功能使其能够按照产品名称.描述和分类进行搜索,从而让用户有一个更好的选择来查找相关结果. 之所以将分类也包含在内,是因为如果用户输入的是"clothes",而不是一件特定的衣服,那么所有的衣服都会被搜索到

Thinkphp 视图模型

1.创建视图模型 2.定义视图模型 class BlogViewModel extends ViewModel { public $viewFields = array( 'Blog'=>array('id','name','title'), 'Category'=>array('title'=>'category_name','_on'=>'Category.id=Blog.category_id','_type'=>'RIGHT'), 'User'=>array('

ABP开发手记9 - 展示层实现增删改查-视图模型

点这里进入ABP开发手记目录 创建视图模型 在展示层(即JD.CRS.Web.Mvc)的Models下新建文件夹Course //用以存放Course相关视图模型 在JD.CRS.Web.Mvc/Models/Course下新建两个视图模型 只读模型 CourseListViewModel.cs //用于查询Course视图模型 1 using System.Collections.Generic; 2 using JD.CRS.Course.Dto; 3 4 namespace JD.CRS.

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro

基于Bootstrap和Knockout.js的ASP.NET MVC开发实战

之前在一家公司里用过Knockout,是easyui 和 Knockout结合 的.下面的这本应该不错. 目录 前言 第一部分入门指南 第1章MVC介绍 创建第一个项目 分析HomeController 分析View 理解URL结构 小结 第2章Bootstrap介绍 默认菜单 含有下拉列表和搜索框的菜单 按钮 警告框 主题 小结 第3章Knockout.js介绍 安装Knockout.js 基本示例 何为MVVM? 创建ViewModel 小结 第4章数据库应用 Entity Framewor

ASP.NET Web API实践系列07,获取数据, 使用Ninject实现依赖倒置,使用Konockout实现页面元素和视图模型的双向绑定

本篇接着上一篇"ASP.NET Web API实践系列06, 在ASP.NET MVC 4 基础上增加使用ASP.NET WEB API",尝试获取数据. 在Models文件夹下创建Comment类: namespace MvcApplication5.Models { public class Comment { public int ID { get; set; } public string Author { get; set; } public string Text { ge

【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)

练习2:创建SPA界面 在本练习中,你将首先创建Geek Quiz的web前端,使用AngularJS专注于单页面应用程序的交互.然后你将使用CSS3来执行丰富的动画和提供一个当从一个问题转换到另一个问题时切换上下文的可视化效果以加强用户体验. 任务1:使用AngularJS来创建SPA界面 在本任务中,你将使用AngularJS来实现Geek Quiz应用程序的客户端.AngularJS是一个开源的JavaScript框架,它能够搭配MVC以加强基于浏览器的应用程序,使其对于开发和测试都更加便