首页 > 代码库 > KnockoutJs学习笔记（八）
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 =http://www.mamicode.com/ 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: simulatedResults17 });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等。
KnockoutJs学习笔记（八）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。