随笔- 60  文章- 14  评论- 17 
  1. KnockOut框架简称KO,是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试,这是一个非常有用的JavaScript框架。
  2. KO的核心就是绑定,包括数据绑定和行为绑定;
  3. KO的数据绑定包括单向和双向绑定;
  4. KO的行为绑定,即是将某个函数注册到某个元素的某个事件上。

示例如下:

 1 <html>
 2 <head>
 3     <title>双向绑定测试</title>
 4     <script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
 5     <script src="../Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
 6 </head>
 7 <body>
 8     <div>
 9         <div>
10             <label>
11                 省:</label><input data-bind="value:province" /></div>
12         <div>
13             <label>
14                 市:</label><input data-bind="value:city" /></div>
15         <div>
16             <label>
17                 区:</label><input data-bind="value:district" /></div>
18         <div>
19             <label>
20                 街道:</label><input data-bind="value:street" /></div>
21         <div>
22             <label>
23                 地址:</label><input data-bind="value:address" style="width: 80%" /></div>
24         <div>
25             <input type="button" data-bind="click:format" value="确定" /></div>
26     </div>
27     <script type="text/javascript">
28         function AddressModel() {
29             var self = this;
30             self.province = ko.observable("江苏省");
31             self.city = ko.observable("苏州市");
32             self.district = ko.observable("工业园区");
33             self.street = ko.observable("星湖街328号");
34             self.address = ko.observable();
35 
36             self.format = function () {
37                 if (self.province() && self.city() && self.district() && self.street()) {
38                     var address = self.province() + " "
39                                 + self.city() + " "
40                                 + self.district() + " "
41                                 + self.street();
42                     self.address(address);
43                 }
44                 else {
45                     alert("请提供完整的地址信息");
46                 }
47             };
48             self.format();
49         }
50         ko.applyBindings(new AddressModel());
51     </script>
52 </body>
53 </html>
View Code
  • 如上面的代码片段所示,我们定义了一个名为 AddressModel的函数作为整个"地址编辑"页面的ViewModel , AddressModel 的五个数据成员 Cprovince 、 city 、 district 、 street 和address)表示地址的四个组成部分和格式化的地址,它们都是基于双向绑定的Observable类型成员,意味着用户的输入能够即时改变绑定的数 据源,而数据源的改变也能即时地反映在绑定的 HTML元素上。
  • Observable数据成员是一个通过调用 ko.observable方法创建的函数,方法调用指定的参数表示更新的数据。
  • AddressModel的另一个成员format是一个自定义的函数,该函数进行地址格式化并用格式化的地址更新address字段。由于address字段是一个Observable成员,一旦它的值发生改变,被绑定的HTML元素的值将会自动更新。
  • AddressModel 的六个字段分别绑定在六个HTML元素上,其中province、city、district和street宇段绑定到代表对应文本框的的Value属性 上(data-bind="value: {成员名称}" ),而address字段则绑定到用于显示格式化地址的<span>元素的Text属性上(data-bind="text:{成员名称}" ),用于格式化地址的 format 字段则与"确定"按钮的 click 事件进行绑定(data-bind="click: {成员名称}")。
  • 真正的绑定工作发生在 ko.applyBindings 方法被调用的时候。
 posted on 2016-06-15 16:49  heoo  阅读(...)  评论(...编辑  收藏