KnockoutJs学习笔记（八）

with binding用于创建一个新的绑定环境（binding context），包含with binding的元素的所有子元素都将处于指定的object的环境限定内。

下面是一个简单的使用with binding的例子：

js部分：

 var viewModel = {
     key: "Name",
     person: {
         firstName: "Kazusa",
         lastName: "Touma"
     }
 };

 ko.applyBindings(viewModel);

html部分：

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

页面显示效果如下：

在上例中，注意到，p元素的子元素内的data-bind都是直接绑定firstName和lastName而无需在前面添加person的前缀，这正是因为我们在p中已经利用with binding将binding context改成了person。

下面是一个更为复杂的例子：

html部分：

 <form data-bind="submit: getTweets">
     Twitter account:
     <input data-bind="value: twitterName" />
     <button type="submit">Get tweets</button>
 </form>

 <div data-bind="with: resultData">
     <h3>Recent tweets fetched at <span data-bind="text: retrievalDate"></span></h3>
     <ol data-bind="foreach: topTweets">
         <li data-bind="text: text"></li>
     </ol>

     <button data-bind="click: $parent.clearResults">Clear tweets</button>
 </div>

js部分：

 function MyViewModel() {
     var self = this;
     self.twitterName = ko.observable("@Kazusa");
     self.resultData = ko.observable();

     self.getTweets = function() {
         var name = self.twitterName();
         var simulatedResults = [
             { text: name + ": What a nice day." },
             { text: name + ": Building some cool apps." },
             { text: name + ": Just saw a famous celebrity eating lard. Yum." }
         ];

         self.resultData({
             retrievalDate: new Date(),
             topTweets: simulatedResults
         });
     };

     self.clearResults =  function() {
         self.resultData(undefined);
     }
 }

 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等。