组合监控属性
顾名思义，就是我们可以将多个属性合并为一个属性。这样在显示的时候就是整体了，并且其中任何一个属性发生改变，这个属性也都会随之发生改变从而更新视图，而这些只需要使用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>
当然组合属性也不一定非要由多个属性组合，我们也可以将多个属性作为参数，然后通过ajax传递到服务端，从而获取属性值然后显示，比如jquery中的$.getJSON方法。
时间： 2024-10-13 10:38:55