Knockout学习之组合监控属性

组合监控属性

顾名思义，就是我们可以将多个属性合并为一个属性。这样在显示的时候就是整体了，并且其中任何一个属性发生改变，这个属性也都会随之发生改变从而更新视图，而这些只需要使用computed函数就可以实现，比如下面的代码我们将firstName和lastName合并为fullName属性，并呈现：

 <span data-bind="text: fullName" />

 <script type="text/javascript">
     function AppViewModel() {
         this.firstName = ko.observable("Bob");
         this.lastName = ko.observable("Smith");
         this.fullName = ko.computed(function () {
             return this.firstName() + " " + this.lastName();
         }, this);
     };

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

这里我们通过传递一个函数给computed，并且该函数仅仅返回由firstName和lastName组成的完整姓名，这样我们就轻松的将两个属性组合了。其中computed的第二个参数传递的是this,主要是用来指定第一个参数的环境上下文。

上面仅仅只能用于显示，如果我们还要修改这个组合属性，那么就需要将上面的写法给写成如下的方式：

 <span data-bind="text: firstName"></span>
 <span data-bind="text: lastName"></span>
 <input type="text" data-bind="value: fullName" />

 <script type="text/javascript">
     function AppViewModel() {
         this.firstName = ko.observable("Bob");
         this.lastName = ko.observable("Smith");
         this.fullName = ko.computed({
             read: function () {
                 return this.firstName() + " " + this.lastName();
             },
             write: function (value) {
                 var lastSpecPos = value.lastIndexOf(" ");
                 if (lastSpecPos > 0) {
                     this.firstName(value.substring(0, lastSpecPos));
                     this.lastName(value.substring(lastSpecPos + 1));
                 }
             },
             owner: this
         });
     };

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

我们将传递给computed的参数改成了一个对象，并且写了read、write、owner属性，其中read用来读取该组合属性，而write用来赋值，所以该函数会有一个value参数，最后的owner跟computed的第二个参数是一样的，主要用来指定read和write函数执行的上下文环境。读者这个时候可以随意的修改文本中的值，会发现前面的值也会跟着变动，这些都是ko带给我们的快捷。

 <span data-bind="text: firstName"></span>
 <span data-bind="text: lastName"></span>
 <input type="text" data-bind="value: fullName" />
 <span data-bind="visible:isEdit">你改动过了</span>

 <script type="text/javascript">
     function AppViewModel() {
         this.firstName = ko.observable("Bob");
         this.lastName = ko.observable("Smith");
         this.isEdit = ko.observable(false);
         this.fullName = ko.computed({
             read: function () {
                 return this.firstName() + " " + this.lastName();
             },
             write: function (value) {
                 var lastSpecPos = value.lastIndexOf(" ");
                 if (lastSpecPos > 0) {
                     this.firstName(value.substring(0, lastSpecPos));
                     this.lastName(value.substring(lastSpecPos + 1));
                     this.isEdit(true);
                 }
             },
             owner: this
         });
     };

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

当然组合属性也不一定非要由多个属性组合，我们也可以将多个属性作为参数，然后通过ajax传递到服务端，从而获取属性值然后显示，比如jquery中的$.getJSON方法。