Knockoutjs实战开发：属性监控（Observables）和依赖跟踪（Dependency tracking ）

昨天我们通过Knockoutjs环境搭建一 文对Knockoutjs进行了简单的了解，我们在使用Js的很多情况下都是为了实现页面的局部刷新从而可以获得数据，使用Knockoutjs的情况也 不例外，在Knockoutjs中提供了属性监控(Observables)和依赖跟踪（Dependency tracking）这两个概念，通过它们可以对我们所关心的控件(比如：text文本框)实现动态监控，这样，当空间的值改变或者出现对应的事件 是，Knockoutjs可以对其最初相应的反应（此反应不需要刷新页面），从而得到我们想要的结果。

下面我们来看一个比较经典的例子：一个人的名字由“姓”和“名”组成，由用户输入一个姓名，中间由空格隔开，然后通过span动态显示用户的姓和名。代码如下：

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>First name: <span data-bind="text: firstName"></span></p> 
<p>Last name: <span data-bind="text: lastName"></span></p> 
<h2>Hello, <input data-bind="value: fullName"/>!</h2>
  
<script type="text/javascript">
    function MyViewModel() {
        this.firstName = ko.observable('桲');
        this.lastName = ko.observable('');

        this.fullName = ko.computed({
            read: function () {
                return this.firstName() + " " + this.lastName();
            },
            write: function (value) {
                var lastSpacePos = value.lastIndexOf(" ");
                if (lastSpacePos > 0) {  
                    this.firstName(value.substring(0, lastSpacePos));
                    this.lastName(value.substring(lastSpacePos + 1)); 
                }
            },
            owner: this
        });
    }

    ko.applyBindings(new MyViewModel());
</script>

 在讲解以上的代码之前，我们首先来了解一下MVVM(Model-View-View Model)的概念

一、MVVM(Model-View-View Model)

     MVVM是一种用户界面的设计模式，它将精巧、复杂的设计算法隐藏在用户界面的背后，从而使我们可以更加方便的使用它。它分为以下的三个部分：

   （1）、Model层：此类似于MVC中的Model层，用来保存我们应用程序的数据。在使用Knockoutjs时，我们通常是使用Ajax来向服务端付出请求来读写Model层的数据的。

   （2）、View Model层：此层是建立在UI上面的纯粹的数据操作。它是和我们的HTML代码分离开来的JavaScript对象，但并不代表持久化对象，它只是对用 户正在操作的且没有进行保存的数据，此设计可以保持View Model的纯洁性，从而能更好的处理复杂的数据操作。

   （3）、View层：此层是用户可以看到的，它用来显示从View Model层传递过来的数据、发出请求命令(比如用户点击了某个Button)、当View Model的值改变时作出相应的更新等。在使用Knockoutjs时，此层仅仅代表HTML页面或者是服务端通过模版生成的HTML页面。

在了解完MVVM的概念后，我们就可以着手分析以上的代码了：

 

二、首先定义ViewModel

function MyViewModel(){}

 在此ViewModel中又定义了三个属性：

this.firstName = ko.observable('桲');
 this.lastName = ko.observable('');
 
 this.fullName = ko.computed({});

 

我们先来看前两个属性，即：firstName和lastName，这两个属性都是使用ko.observable()来定义的，使用此方法来定义 就是告诉Knockoutjs属性firstName和lastName需要进行属性监控，这样当firstName和lastName的值改变时，就会 触动对应的View层的组件做出相应的改变，这样才会实现当用户输入完fullName之后，firstName和lastName做出相应的改变。

三、Computed Observables(组合监控属性)

我们在定义第三个fullName属性时使用的是：ko.computed()方法，此方法代表将多个监控属性组合到一起(在这里我们将 firstName和lastName进行组合形成了fullName)，当组合属性中的任何一个监控属性的值改变时，组合属性的值也会做出相应的改变。

this.fullName = ko.computed({
             read: function () {
                 return this.firstName() + " " + this.lastName();
             },
             write: function (value) {
                 var lastSpacePos = value.lastIndexOf(" ");
                 if (lastSpacePos > 0) {  
                     this.firstName(value.substring(0, lastSpacePos));
                     this.lastName(value.substring(lastSpacePos + 1)); 
                 }
             },
             owner: this
         });

 

在此例中，我们使用了组合属性的三个参数：read、write和owner。其中，

 （1）、read是必须的，表示返回此组合属性的值。

 （2）、write是可选的，如果我们使用此属性，则代表此组合属性是可写的，当从View层传入一个value值，则我们可以根据自己的需要对值进行处理。这里我需要将value根据空格拆分，然后分别赋值给firstName和lastName。
 （3）、owner可选，一般值为this。

 

四、激活属性监控

ko.applyBindings(new MyViewModel());

 

这里我们使用ko.applyBindings()对我们定义的MyViewModel进行激活，这样我们在进行绑定时就可以看到各个属性的值，如果没有进行激活的话，则不会显示对应属性的值，这点我们要注意了。

 

五、绑定属性到View层

<p>First name: <span data-bind="text: firstName"></span></p> 
 <p>Last name: <span data-bind="text: lastName"></span></p> 
 <h2>Hello, <input data-bind="value: fullName"/>!</h2>

 

这里使用data-bind分别对firstName、lastName和fullName进行了绑定，这样我们就可以看到各个属性的值了。

 

六、为什么使用组合属性(Computed Observables)

 在使用组合属性(Computed Observables)时，我们可以对我们想要处理的属性或者验证做出相应的措施，比如：

 （1）、值的转换

   我们可以通过以下的代码将对应的输入表示为对应的金额输出到页面： 

<script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <p>Enter bid price: <input data-bind="value: formattedPrice"/></p>
   
 <script type="text/javascript">
     function MyViewModel() {
         this.price = ko.observable(25.99);
 
         this.formattedPrice = ko.computed({
             read: function () {
                 return 'ㄓ' + this.price().toFixed(2);
             },
             write: function (value) {
                 value = parseFloat(value.replace(/[^\.\d]/g, ""));
                 this.price(isNaN(value) ? 0 : value);  
             },
             owner: this
         });
     }
 
     ko.applyBindings(new MyViewModel());
 </script>

 

（2）、用户输入验证，只允许输入数字

 <script type="text/javascript" src="knockout-2.2.0.js"></script>
 
 <p>Enter a numeric value: <input data-bind="value: attemptedValue"/></p> 
 <div data-bind="visible: !lastInputWasValid()">That's not a number!</div>
   
 <script type="text/javascript">
     function MyViewModel() {
         this.acceptedNumericValue = ko.observable(123);
         this.lastInputWasValid = ko.observable(true);
 
         this.attemptedValue = ko.computed({
             read: this.acceptedNumericValue,
             write: function (value) {
                 if (isNaN(value))
                     this.lastInputWasValid(false);
                 else {
                     this.lastInputWasValid(true);
                     this.acceptedNumericValue(value); 
                 }
             },
             owner: this
         });
     }
 
     ko.applyBindings(new MyViewModel());
 </script>