Knockoutjs实战开发：自定义标签支持虚拟元素(Creating custom bindings that support virtual elements)

Knockoutjs的控制流程绑定（比如：if和foreach）不仅仅可以绑定在一个真实的DOM元素上，我们也可以将其绑定到一个虚拟的DOM元素上，这个DOM是由一个特殊语法定义的。比如：

<ul> 
    <li class="heading">My heading</li> 
    <!-- ko foreach: items --> 
        <li data-bind="text: $data"></li> 
    <!-- /ko --> 
</ul>

我们自定义的标签也能向上例一样支持虚拟元素，但是，为了使用此功能，我们必须明确的告诉Knockoutjs我们自定义的绑定是支持虚拟元素的，此时我们可以使用ko.virtualElements.allowedBindings方法来通知Knockoutjs。

例1、作为开始，我们首先自定义一个绑定，如下：

<script type="text/javascript">
     ko.bindingHandlers.randomOrder = {
         init: function (elem, valueAccessor) {
             // Pull out each of the child elements into an array 
             var childElems = [];
             while (elem.firstChild)
                 childElems.push(elem.removeChild(elem.firstChild));

             // Put them back in a random order 
             while (childElems.length) {
                 var randomIndex = Math.floor(Math.random() * childElems.length),
                chosenChild = childElems.splice(randomIndex, 1);
                 elem.appendChild(chosenChild[0]);
             }
         }
     };
</script>

此时我们自定义的绑定在真实的DOM元素中是可以起作用的，下面的元素会按照随机数重新进行排序：

<div data-bind="randomOrder: true"> 
    <div>First</div> 
    <div>Second</div> 
    <div>Third</div> 
</div>

而我们自定义的绑定则不会在虚拟DOM元素中起作用。

<!-- ko randomOrder: true --> 
    <div>First</div> 
    <div>Second</div> 
    <div>Third</div> 
<!-- /ko -->

你可能还会获得以下的错误：The binding 'randomOrder' cannot be used with virtual elements。为了让我们自定义的绑定在虚拟DOM元素上起作用，我们可以使用下面的语句来通知Knockoutjs。

ko.virtualElements.allowedBindings.randomOrder = true;

此时，可能不会报错了，但是我们自定义绑定依然没有起作用，这是因为我们使用的编码方式并不能支持虚拟元素，这也就是为什么Knockoutjs会让我们选择性的支持虚拟元素：除非你编写的自定义绑定代码也支持虚拟元素，否则即使你加入上面的话，也不会起作用的。
因此我们将上例中的自定义绑定做如下的修改：

 <script type="text/javascript">
     ko.bindingHandlers.randomOrder = {
         init: function (elem, valueAccessor) {
             // Build an array of child elements 
             alert("bb");
             var child = ko.virtualElements.firstChild(elem),
            childElems = [];
             while (child) {
                 childElems.push(child);
                 child = ko.virtualElements.nextSibling(child);
             }

             // Remove them all, then put them back in a random order 
             ko.virtualElements.emptyNode(elem);
             while (childElems.length) {
                 var randomIndex = Math.floor(Math.random() * childElems.length),
                chosenChild = childElems.splice(randomIndex, 1);
                 ko.virtualElements.prepend(elem, chosenChild[0]);
             }
         }
     };
     ko.virtualElements.allowedBindings.randomOrder = true;
</script>

此时，我们的虚拟标签就可以使用了。此时我们使用ko.virtualElements.firstChild(domOrVirtualElement)代替了domElement.firstChild，
此例的完整代码如下：

<script type="text/javascript" src="knockout-2.2.0.js"></script>


-------------------------------------
<!-- ko randomOrder: true --> 
    <div>First</div> 
    <div>Second</div> 
    <div>Third</div> 
<!-- /ko -->
 <script type="text/javascript">
     ko.bindingHandlers.randomOrder = {
         init: function (elem, valueAccessor) {
             // Build an array of child elements 
             alert("bb");
             var child = ko.virtualElements.firstChild(elem),
            childElems = [];
             while (child) {
                 childElems.push(child);
                 child = ko.virtualElements.nextSibling(child);
             }

             // Remove them all, then put them back in a random order 
             ko.virtualElements.emptyNode(elem);
             while (childElems.length) {
                 var randomIndex = Math.floor(Math.random() * childElems.length),
                chosenChild = childElems.splice(randomIndex, 1);
                 ko.virtualElements.prepend(elem, chosenChild[0]);
             }
         }
     };
     ko.virtualElements.allowedBindings.randomOrder = true;
</script>

<script type="text/javascript">
    var viewModel = {
        giftWrap: ko.observable(true)
    };
    ko.applyBindings(viewModel);
</script>



  

 虚拟元素的API大家可以点击：http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html查看，这里就不介绍了。