Knockoutjs实战开发：控制子绑定(control descendant bindings)

在上一篇文章中我们介绍了如何来创建一个自定义绑定，今天我们就继续来学习如何来控制子绑定(control descendant bindings)。在此之前我们首先说明一下，此项功能相对来说比较高级，通常我们在创建自己的可重用的库时我们才会使用，不是说当我们在使用Knockoutjs创建我们的应用时一定要使用此项功能的。

在默认情况下，一个绑定只对它所绑定的element元素起作用。但是如果我们想要此绑定对它所绑定的element的所有子element起作用我们应该怎么办呢？我们在自定义binding的时候我们可以告诉Knockoutjs不绑定他的子元素，这样我们自己定义的绑定就可以以我们喜欢的方式任意绑定了。我们只需要在init函数中返回{ controlsDescendantBindings: true }即可

一、控制是否对子绑定起作用

我们来举一个非常简单的例子，我们自定义一个绑定名为：allowBindings，这样如果他的值为true的话我们就进行子绑定。如果他的值为false则不会对子绑定起任何作用。

<script type="text/javascript">
    ko.bindingHandlers.allowBindings = {
        init: function (elem, valueAccessor) {
            // Let bindings proceed as normal *only if* my value is false 
            var shouldAllowBindings = ko.utils.unwrapObservable(valueAccessor());
            return { controlsDescendantBindings: !shouldAllowBindings };
        }
    };
</script>

我们可以在UI中使用此绑定：

<div data-bind="allowBindings: true"> 
    <!-- This will display Replacement, because bindings are applied --> 
    <div data-bind="text: 'Replacement'">Original</div> 
</div> 
  
<div data-bind="allowBindings: false"> 
    <!-- This will display Original, because bindings are not applied --> 
    <div data-bind="text: 'Replacement'">Original</div> 
</div>

二、为子绑定提供额外的值

我们定义一个绑定：withProperties，它中的属性可以被他的所有子绑定得到：

<script type="text/javascript">
    ko.bindingHandlers.withProperties = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // Make a modified binding context, with a extra properties, and apply it to descendant elements 
            var newProperties = valueAccessor(),
            innerBindingContext = bindingContext.extend(newProperties);
            ko.applyBindingsToDescendants(innerBindingContext, element);

            // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice 
            return { controlsDescendantBindings: true };
        }
    };
</script>

正如我们所看到的那样，我们使用extend函数来产生额外属性的克隆，这并不影响我们本身元素的值，所以对于他同级别的元素也是没有影响的，它仅仅对它的字元素有影响。

下面我们就可以使用上面自定义的绑定了：

<div data-bind="withProperties: { emotion: 'happy' }"> 
    Today I feel <span data-bind="text: emotion"></span>. <!-- Displays: happy --> 
</div> 
<div data-bind="withProperties: { emotion: 'whimsical' }"> 
    Today I feel <span data-bind="text: emotion"></span>. <!-- Displays: whimsical --> 
</div>

三、在上下文层次结构中添加额外的水平绑定

例如with、foreach绑定可以在同等级的上下文层次结构中绑定相应的水平绑定，这样我们就可以在子绑定中使用$parent、$parents、$root、$parentContext来调用外面的属性。如果我们想要在自定义的绑定中使用此功能的话，这种情况下我们就不是使用上例提到的bindingContext.extend()，而是使用bindingContext.createChildContext(someData)。这样它就返回一个新的绑定上下文，他的viewmodel是someData,它的$parentContext就是bindingContext。如果你愿意的话你可以使用ko.utils.extend来扩展子上下文。

<script type="text/javascript">
    ko.bindingHandlers.withProperties = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // Make a modified binding context, with a extra properties, and apply it to descendant elements 
            var newProperties = valueAccessor(),
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.utils.extend(childBindingContext, newProperties);
            ko.applyBindingsToDescendants(childBindingContext, element);

            // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice 
            return { controlsDescendantBindings: true };
        }
    };
</script>

这样我们自定义的withProperties可以使用在嵌套中，并且我们可以使用$parentContext来取得父上下文。

<div data-bind="withProperties: { displayMode: 'twoColumn' }"> 
    The outer display mode is <span data-bind="text: displayMode"></span>. 
    <div data-bind="withProperties: { displayMode: 'doubleWidth' }"> 
        The inner display mode is <span data-bind="text: displayMode"></span>, but I haven't forgotten 
        that the outer display mode is <span data-bind="text: $parentContext.displayMode"></span>. 
    </div> 
</div>

通过修改绑定上下文和控制子绑定,您有一个强大的和先进的工具来创建自己的定制绑定机制。