在写这篇文章之前,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>
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>
上面我们就能够应用上面自定义的绑定了:
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>
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)的进步(改善)不是以个人意志(习惯)为转移的!