Knockout学習の組合せ監視属性

コンビネーションモニタリング属性
名前の通り、複数のプロパティを1つのプロパティにマージできます.これにより、表示時に全体が表示され、いずれかの属性が変更され、この属性も変更されてビューが更新されます.これらは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からなる完全な名前だけを返すことで、2つのプロパティを簡単に組み合わせることができます.ここでcomputedの2番目のパラメータはthisであり、主に1番目のパラメータを指定するための環境コンテキストである.
 
表示にのみ使用できますが、この組み合わせのプロパティを変更する場合は、次のように書く必要があります.

 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の2番目のパラメータと同じで、主に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メソッド.