KnockoutJs學習筆記（八）

with binding用於建立一個新的綁定環境（binding context），包含with binding的元素的全部子元素都將處於指定的object的環境限定內。

下面是一個簡單的使用with binding的例子：

js部分：

1 var viewModel = {
2     key: "Name",
3     person: {
4         firstName: "Kazusa",
5         lastName: "Touma"
6     }
7 };
8 
9 ko.applyBindings(viewModel);

html部分：

1 <h3 data-bind="text: key"></h3>
2 <p data-bind="with: person">
3     First name: <span data-bind="text: firstName"></span><br />
4     Last name: <span data-bind="text: lastName"></span>
5 </p>

頁面顯示效果以下：

在上例中，注意到，p元素的子元素內的data-bind都是直接綁定firstName和lastName而無需在前面添加person的前綴，這正是由於咱們在p中已經利用with binding將binding context改爲了person。

下面是一個更爲複雜的例子：

html部分：

 1 <form data-bind="submit: getTweets">
 2     Twitter account:
 3     <input data-bind="value: twitterName" />
 4     <button type="submit">Get tweets</button>
 5 </form>
 6 
 7 <div data-bind="with: resultData">
 8     <h3>Recent tweets fetched at <span data-bind="text: retrievalDate"></span></h3>
 9     <ol data-bind="foreach: topTweets">
10         <li data-bind="text: text"></li>
11     </ol>
12 
13     <button data-bind="click: $parent.clearResults">Clear tweets</button>
14 </div>

js部分：

 1 function MyViewModel() {
 2     var self = this;
 3     self.twitterName = ko.observable("@Kazusa");
 4     self.resultData = ko.observable();
 5 
 6     self.getTweets = function() {
 7         var name = self.twitterName();
 8         var simulatedResults = [
 9             { text: name + ": What a nice day." },
10             { text: name + ": Building some cool apps." },
11             { text: name + ": Just saw a famous celebrity eating lard. Yum." }
12         ];
13         
14         self.resultData({
15             retrievalDate: new Date(),
16             topTweets: simulatedResults
17         });
18     };
19 
20     self.clearResults =  function() {
21         self.resultData(undefined);
22     }
23 }
24 
25 ko.applyBindings(new MyViewModel());

從這裏例子中，咱們能夠看出with binding在使用時的幾個特色。當with binding所綁定的binding context爲null或是undefined時，包含with binding的元素的全部子元素都將從UI頁面中移除。若是咱們須要從parent binding context中獲取data或是function，咱們能夠使用特殊的context properties好比說$parent或root，這部分能夠參考The binding context。

假若綁定的binding context是一個observable，包含with binding的元素會隨着observable的變化而移除現有的子孫元素並添加一系列隸屬於新的binding context的子孫元素。

相似的，with binding也提供無容器的控制流語法，這裏省略例子，能夠參考if binding等。