Knockoutjs实战开发：控制子绑定(control descendant bindings)
在上一篇文章中我们介绍了如何来创建一个自定义绑定，今天我们就继续来学习如何来控制子绑定(control descendant bindings)。在此之前我们首先说明一下，此项功能相对来说比较高级，通常我们在创建自己的可重用的库时我们才会使用，不是说当我们在使用Knockoutjs创建我们的应用时一定要使用此项功能的。
在默认情况下，一个绑定只对它所绑定的element元素起作用。但是如果我们想要此绑定对它所绑定的element的所有子element起作用我们应该怎么办呢？我们在自定义binding的时候我们可以告诉Knockoutjs不绑定他的子元素，这样我们自己定义的绑定就可以以我们喜欢的方式任意绑定了。我们只需要在init函数中返回{ controlsDescendantBindings: true }即可
一、控制是否对子绑定起作用
我们来举一个非常简单的例子，我们自定义一个绑定名为：allowBindings，这样如果他的值为true的话我们就进行子绑定。如果他的值为false则不会对子绑定起任何作用。
1 <script type="text/javascript"> 2 ko.bindingHandlers.allowBindings = { 3 init: function (elem, valueAccessor) { 4 // Let bindings proceed as normal *only if* my value is false 5 var shouldAllowBindings = ko.utils.unwrapObservable(valueAccessor()); 6 return { controlsDescendantBindings: !shouldAllowBindings }; 7 } 8 }; 9 </script>
我们可以在UI中使用此绑定：
1 <div data-bind="allowBindings: true"> 2 <!-- This will display Replacement, because bindings are applied --> 3 <div data-bind="text: 'Replacement'">Original</div> 4 </div> 5 6 <div data-bind="allowBindings: false"> 7 <!-- This will display Original, because bindings are not applied --> 8 <div data-bind="text: 'Replacement'">Original</div> 9 </div>
二、为子绑定提供额外的值
我们定义一个绑定：withProperties，它中的属性可以被他的所有子绑定得到：
1 <script type="text/javascript"> 2 ko.bindingHandlers.withProperties = { 3 init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 4 // Make a modified binding context, with a extra properties, and apply it to descendant elements 5 var newProperties = valueAccessor(), 6 innerBindingContext = bindingContext.extend(newProperties); 7 ko.applyBindingsToDescendants(innerBindingContext, element); 8 9 // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice 10 return { controlsDescendantBindings: true }; 11 } 12 }; 13 </script>
正如我们所看到的那样，我们使用extend函数来产生额外属性的克隆，这并不影响我们本身元素的值，所以对于他同级别的元素也是没有影响的，它仅仅对它的字元素有影响。
下面我们就可以使用上面自定义的绑定了：
1 <div data-bind="withProperties: { emotion: 'happy' }"> 2 Today I feel <span data-bind="text: emotion"></span>. <!-- Displays: happy --> 3 </div> 4 <div data-bind="withProperties: { emotion: 'whimsical' }"> 5 Today I feel <span data-bind="text: emotion"></span>. <!-- Displays: whimsical --> 6 </div>
三、在上下文层次结构中添加额外的水平绑定
例如with、foreach绑定可以在同等级的上下文层次结构中绑定相应的水平绑定，这样我们就可以在子绑定中使用$parent、$parents、$root、$parentContext来调用外面的属性。如果我们想要在自定义的绑定中使用此功能的话，这种情况下我们就不是使用上例提到的bindingContext.extend()，而是使用bindingContext.createChildContext(someData)。这样它就返回一个新的绑定上下文，他的viewmodel是someData,它的$parentContext就是bindingContext。如果你愿意的话你可以使用ko.utils.extend来扩展子上下文。
1 <script type="text/javascript"> 2 ko.bindingHandlers.withProperties = { 3 init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 4 // Make a modified binding context, with a extra properties, and apply it to descendant elements 5 var newProperties = valueAccessor(), 6 childBindingContext = bindingContext.createChildContext(viewModel); 7 ko.utils.extend(childBindingContext, newProperties); 8 ko.applyBindingsToDescendants(childBindingContext, element); 9 10 // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice 11 return { controlsDescendantBindings: true }; 12 } 13 }; 14 </script>
这样我们自定义的withProperties可以使用在嵌套中，并且我们可以使用$parentContext来取得父上下文。
1 <div data-bind="withProperties: { displayMode: 'twoColumn' }"> 2 The outer display mode is <span data-bind="text: displayMode"></span>. 3 <div data-bind="withProperties: { displayMode: 'doubleWidth' }"> 4 The inner display mode is <span data-bind="text: displayMode"></span>, but I haven't forgotten 5 that the outer display mode is <span data-bind="text: $parentContext.displayMode"></span>. 6 </div> 7 </div>
通过修改绑定上下文和控制子绑定,您有一个强大的和先进的工具来创建自己的定制绑定机制。
