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

在写这篇文章之前，xxx已经写过了几篇关于改绑定自定义主题的文章,想要了解的朋友可以去翻一下之前的文章

    在上一篇文章中我们分析了如何来建创一个自定义绑定，明天我们就续继来学习如何来控制子绑定(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>

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

 

 

 

 

 

 

 

 

 

 

 

 

 

文章结束给大家分享下程序员的一些笑话语录： 那是习惯决定的，一直保持一个习惯是不好的！IE6的用户不习惯多标签，但是最终肯定还是得转到多标签的浏览器。历史（软件UI）的进步（改善）不是以个人意志（习惯）为转移的！