Knockout学习之组合监控属性

2014-06-04 09:16 y-z-f 阅读(1510) 评论(0) 编辑收藏举报

组合监控属性

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

 1 <span data-bind="text: fullName" />
 2 
 3 <script type="text/javascript">
 4     function AppViewModel() {
 5         this.firstName = ko.observable("Bob");
 6         this.lastName = ko.observable("Smith");
 7         this.fullName = ko.computed(function () {
 8             return this.firstName() + " " + this.lastName();
 9         }, this);
10     };
11 
12     ko.applyBindings(new AppViewModel());
13 </script>

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

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

 1 <span data-bind="text: firstName"></span>
 2 <span data-bind="text: lastName"></span>
 3 <input type="text" data-bind="value: fullName" />
 4 
 5 <script type="text/javascript">
 6     function AppViewModel() {
 7         this.firstName = ko.observable("Bob");
 8         this.lastName = ko.observable("Smith");
 9         this.fullName = ko.computed({
10             read: function () {
11                 return this.firstName() + " " + this.lastName();
12             },
13             write: function (value) {
14                 var lastSpecPos = value.lastIndexOf(" ");
15                 if (lastSpecPos > 0) {
16                     this.firstName(value.substring(0, lastSpecPos));
17                     this.lastName(value.substring(lastSpecPos + 1));
18                 }
19             },
20             owner: this
21         });
22     };
23 
24     ko.applyBindings(new AppViewModel());
25 </script>

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

 1 <span data-bind="text: firstName"></span>
 2 <span data-bind="text: lastName"></span>
 3 <input type="text" data-bind="value: fullName" />
 4 <span data-bind="visible:isEdit">你改动过了</span>
 5 
 6 <script type="text/javascript">
 7     function AppViewModel() {
 8         this.firstName = ko.observable("Bob");
 9         this.lastName = ko.observable("Smith");
10         this.isEdit = ko.observable(false);
11         this.fullName = ko.computed({
12             read: function () {
13                 return this.firstName() + " " + this.lastName();
14             },
15             write: function (value) {
16                 var lastSpecPos = value.lastIndexOf(" ");
17                 if (lastSpecPos > 0) {
18                     this.firstName(value.substring(0, lastSpecPos));
19                     this.lastName(value.substring(lastSpecPos + 1));
20                     this.isEdit(true);
21                 }
22             },
23             owner: this
24         });
25     };
26 
27     ko.applyBindings(new AppViewModel());
28 </script>