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

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

Observables,这个词的翻译来自汤姆大叔,对于部分翻译不是很准确的,欢迎大家留言,以得到更好的翻译。

Knockout是建立在以下3个核心功能之上的:

  • 1、    属性监控与依赖跟踪
  • 2、    声明式绑定
  • 3、    模版机制

在本节中,我们将学习3个核心里面的第一个。但在这之前,先让我们学习一下MVVM设计模式和View Model的概念。

MVVM和View Models

Model-View-View Model (MVVM)是一种创建用户界面的设计模式。通过它只要将UI界面分成以下3个部分,就可以使复杂的界面变得简单:

1、Model,用于存储你应用程序数据,这些数据表示你业务领域的对象和数据操作(例如:银行可以进行资金转账),并且独立于任何界面。当使用KO的时候,通常是使用Ajax向服务器请求数据来读写这个数据模型。

2、View Model,纯粹用于描述数据内容和页面操作的数据模型。例如,如果你想实现一个列表编辑器,你的ViewModel(数据模型)就是项目清单对象和你所暴露出来的添加和删除列表项的方法。

注意:这不是UI本身,它不具有任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。当使用KO时,你的View Model(数据模型)是纯粹的不包含HTML知识的JavaScript对象,保持View Model(数据模型)抽象在使用时可以保持简单,因此你可以更简单的操作管理更复杂的行为。

3、View,代表View Model状态的一个可见、互动的UI界面。它主要用于显示View Model的数据信息、发送用户命令(例如,当用户点击按钮)以及在View Model发生变化时保持自动更新。

使用KO时,你的View层主要就是简单的将HTML文档声明式的绑定到View Model,将它们关联起来。另外,你也可以利用模版从View Model获取数据动态生成HTML。

使用KO创建一个View Model,仅仅只需要声明一个JavaScript对象,例如:

  1. var myViewModel = {   
  2.     personName: 'Bob',   
  3.     personAge: 123   
  4. };  

你可以创建一个简单的视图声明式绑定到这个View Model上,例如,下面的代码显示personName的值:

  1. The name is <span data-bind="text: personName"></span>  
激活Knockout

data-bind属性并不是HTML固有对象,但使用它是完全正确的(这是完全遵守HTML5,尽管有验证器指出这是一个无法验证的属性,但在HTML4当中使用是不会造成任何问题的)。但浏览器并不知道它是什么意思,所以你需要激活Knockout来使其生效。

激活Knockout,只需要将下面的代码加到<script>标签中就可以了:

  1. ko.applyBindings(myViewModel);  

你可以将这个代码放到文档底部,或者放在顶部包含在DOM处理完成诸如JQuery的$函数方法中。

以上操作完成后,你的View(页面)显示的内容等同于编写以下HTML代码:

  1. The name is <span>Bob</span>  

下面介绍下ko.applyBindings操作时使用的是什么样的参数:

第一个参数是你想激活KO时用于声明式绑定的View Model对象;

第二个参数(可选),你可以使用第二个参数来设置要使用data-bind属性的HTML元素或容器。例如:

  1. ko.applyBindings(myViewModel, document.getElementById('someElementId'))  

它限制了只有ID为someElementId的元素才能激活使用KO功能,当你在一个页面中声明了多个View Model来绑定不同的界面区域时,这样限制是很有好处的。

 

在上节中,我们知道了如果创建一个ViewModel,并且如何激活Knockout,本节中,将学习监控属性相关内容。

Observables

上面,你已经看到如何创建一个基本的数据模型以及如何利用绑定来显示它的属性。但是KO最重要的一个属性就是当View Model发生变化时能够自动的更新UI界面。KO是如何能够知道你的View Model已经发生改变了呢?答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript 对象,能够通知用户它的改变以及自动检测依赖关系。

例如:重写上述例子中的View Model为以下代码:

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

你根本不需要对View进行更改,所有的data-bind语法依然正常工作。所不同的是,现在它能够自动检测变化,并通知它自动更新界面(View)。

Reading and writing observables

并不是所有的浏览器都支持JavaScript的getters and setters (比如IE),所以,为了兼容,ko.observable监控的对象都是方法。

1、读取当前监控的属性值,只需要直接调用observable(不需要参数),在这个例子当中,调用myViewModel.personName()将会返回'Bob',调用myViewModel.personAge() 将会返回'123'

2、写一个新值到监控属性上,调用observable方法,将要写的值作为一个参数传入即可。例如,调用myViewModel.personName('Mary') 将会把名称改变成 'Mary'

3、一次性改变Model对象监控的多个属性值,你可以使用链式方法。例如:myViewModel.personName('Mary').personAge(50) 将会把名称改变成'Mary'将年龄设置为 50.

监控属性最重要的一点就是可以随时监控,也就是说,其他代码可以告诉它哪些是需要通知发生变化的。这就是为什么KO会有如此多的内置绑定语法。所以,当你在页面中编写data-bind="text: personName"text 会绑定注册到自身,当personName发生变化时,它能够立即得到通知。

当你通过调用 myViewModel.personName('Mary') 将名称的值改变成为'Mary'时,text绑定会自动更新新值到其对应的DOM对象元素上,这就是为什么改变数据模型能够自动刷新View页面。

监控属性的显示订阅

通常情况下,你不需要手工订阅,所以初学者可以跳过这一节。

对于高级用户,如果你想要注册自己的订阅来通知监控属性的变化,你可以使用subscribe 方法。例如:

  1. myViewModel.personName.subscribe(function(newValue) {   
  2.     alert("The person's new name is " + newValue);   
  3. });  

subscribe 方法在KO内部很多地方都有用到。你也可以终止自己的订阅:首先获取到这个订阅,然后调用dispose方法即可。例如:

  1. var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });   
  2. // ...then later...   
  3. subscription.dispose(); // I no longer want notifications  

大多数时间,你不需要这么做,因为内置的绑定和模版系统功能在管理订阅上已经做了很多工作。

这个文档是我自己原创制作的,在别的网上肯定是没有的。 而且做得非常好看,和非常准确。 如果下载的人多,将会把中英文对照的版本也上传。 Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。 重要特性: 优雅的依赖追踪 - 不管任何时候你的数据模型更新,都会自动更新相应的内容。 Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes. 声明式绑定 - 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。 Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts. 轻易可扩展 - 几行代码就可以实现自定义行为作为新的声明式绑定。 Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code. 额外的好处: 纯JavaScript类库 – 兼容任何服务器端和客户端技术 Pure JavaScript library - works with any server or client-side technology 可添加到Web程序最上部 – 不需要大的架构改变 Can be added on top of your existing web application - without requiring major architectural changes 简洁的 - Gzip之前大约25kb Compact - around 13kb after gzipping 兼容任何主流浏览器 - (IE 6+、Firefox 2+、Chrome、Safari、其它) Works on any mainstream browser - (IE 6+, Firefox 2+, Chrome, Safari, others) 采用行为驱动开发 - 意味着在新的浏览器和平台上可以很容易通过验证。 Comprehensive suite of specifications - (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms 开发人员如果用过Silverlight或者WPF可能会知道KO是MVVM模式的一个例子。如果熟悉 Ruby on Rails 或其它MVC技术可能会发现它是一个带有声明式语法的MVC实时form。换句话说,你可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式… 不管它为你做什么 Developers familiar with Ruby on Rails, ASP.NET MVC, or other MV* technologies may see MVVM as a real-time form of MVC with declarative syntax. In another sense, you can think of KO as a general way to make UIs for editing JSON data… whatever works for you :) OK, 如何使用它? 简单来说:声明你的数据作为一个JavaScript 模型对象(model object),然后将DOM 元素或者模板(templates)绑定到它上面. The quickest and most fun way to get started is by working through the interactive tutorials. Once you’ve got to grips with the basics, explore the live examples and then have a go with it in your own project. KO和jQuery (或Prototype等)是竞争关系还是能一起使用? 所有人都喜欢jQuery! 它是一个在页面里操作元素和事件的框架,非常出色并且易使用,在DOM操作上肯定使用jQuery,KO解决不同的问题。 Everyone loves jQuery! It’s an outstanding replacement for the clunky, inconsistent DOM API we had to put up with in the past. jQuery is an excellent low-level way to manipulate elements and event handlers in a web page. I certainly still use jQuery for low-level DOM manipulation. KO solves a different problem. 如果页面要求复杂,仅仅使用jQuery需要花费更多的代码。 例如:一个表格里显示一个列表,然后统计列表的数量,Add按钮在数据行TR小于5调的时候启用,否则就禁用。jQuery 没有基本的数据模型的概念,所以需要获取数据的数量(从table/div或者专门定义的CSS class),如果需要在某些SPAN里显示数据的数量,当添加新数据的时候,你还要记得更新这个SPAN的text。当然,你还要判断当总数>=5条的时候禁用Add按钮。 然后,如果还要实现Delete功能的时候,你不得不指出哪一个DOM元素被点击以后需要改变。 As soon as your UI gets nontrivial and has a few overlapping behaviors, things can get tricky and expensive to maintain if you only use jQuery. Consider an example: you’re displaying a list of items, stating the number of items in that list, and want to enable an ‘Add’ button only when there are fewer than 5 items. jQuery doesn’t have a concept of an underlying data model, so to get the number of items you have to infer it from the number of TRs in a table or the number of DIVs with a certain CSS class. Maybe the number of items is displayed in some SPAN, and you have to remember to update that SPAN’s text when the user adds an item. You also must remember to disable the ‘Add’ button when the number of TRs is 5. Later, you’re asked also to implement a ‘Delete’ button and you have to figure out which DOM elements to change whenever it’s clicked. Knockout的实现有何不同? 使用KO非常简单。将你的数据描绘成一个JavaScript数组对象myItems,然后使用模板(template)转化这个数组到表格里(或者一组DIV)。不管什么时候数组改变, UI界面也会响应改变(不用指出如何插入新行或在哪里插入),剩余的工作就是同步了。例如:你可以声明绑定如下一个SPAN显示数据数量(可以放在页面的任何地方,不一定非要在template里): It’s much easier with KO. It lets you scale up in complexity without fear of introducing inconsistencies. Just represent your items as a JavaScript array, and then use a foreach binding to transform this array into a TABLE or set of DIVs. Whenever the array changes, the UI changes to match (you don’t have to figure out how to inject new TRs or where to inject them). The rest of the UI stays in sync. For example, you can declaratively bind a SPAN to display the number of items as follows: There are <span data-bind="text: myItems().count"></span> items就是这些!你不需要写代码去更新它,它的更新依赖于数组myItems的改变。同样, Add按钮的启用和禁用依赖于数组 myItems 的长度,如下: That’s it! You don’t have to write code to update it; it updates on its own when the myItems array changes. Similarly, to make the ‘Add’ button enable or disable depending on the number of items, just write: <button data-bind="enable: myItems().count < 5">Add</button>之后,如果你要实现Delete功能,不必指出如何操作UI元素,只需要修改数据模型就可以了。 Later, when you’re asked to implement the ‘Delete’ functionality, you don’t have to figure out what bits of the UI it has to interact with; you just make it alter the underlying data model. 总结:KO没有和jQuery或类似的DOM 操作API对抗竞争。KO提供了一个关联数据模型和用户界面的高级功能。KO本身不依赖jQuery,但是你可以一起同时使用jQuery, 生动平缓的UI改变需要真正使用jQuery。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值