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

首先声明，我是一个菜鸟。一下文章中出现技术误导情况盖不负责

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

1 <ul> 
2     <li class="heading">My heading</li> 
3     <!-- ko foreach: items --> 
4         <li data-bind="text: $data"></li> 
5     <!-- /ko --> 
6 </ul>

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

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

 1 <script type="text/javascript">
 2      ko.bindingHandlers.randomOrder = {
 3          init: function (elem, valueAccessor) {
 4              // Pull out each of the child elements into an array 
 5              var childElems = [];
 6              while (elem.firstChild)
 7                  childElems.push(elem.removeChild(elem.firstChild));
 8 
 9              // Put them back in a random order 
10              while (childElems.length) {
11                  var randomIndex = Math.floor(Math.random() * childElems.length),
12                 chosenChild = childElems.splice(randomIndex, 1);
13                  elem.appendChild(chosenChild[0]);
14              }
15          }
16      };
17 </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，
此例的整完代码如下：

 1 <script type="text/javascript" src="knockout-2.2.0.js"></script>
 2 
 3 
 4 -------------------------------------
 5 <!-- ko randomOrder: true --> 
 6     <div>First</div> 
 7     <div>Second</div> 
 8     <div>Third</div> 
 9 <!-- /ko -->
10  <script type="text/javascript">
11      ko.bindingHandlers.randomOrder = {
12          init: function (elem, valueAccessor) {
13              // Build an array of child elements 
14              alert("bb");
15              var child = ko.virtualElements.firstChild(elem),
16             childElems = [];
17              while (child) {
18                  childElems.push(child);
19                  child = ko.virtualElements.nextSibling(child);
20              }
21 
22              // Remove them all, then put them back in a random order 
23              ko.virtualElements.emptyNode(elem);
24              while (childElems.length) {
25                  var randomIndex = Math.floor(Math.random() * childElems.length),
26                 chosenChild = childElems.splice(randomIndex, 1);
27                  ko.virtualElements.prepend(elem, chosenChild[0]);
28              }
29          }
30      };
31      ko.virtualElements.allowedBindings.randomOrder = true;
32 </script>
33 
34 <script type="text/javascript">
35     var viewModel = {
36         giftWrap: ko.observable(true)
37     };
38     ko.applyBindings(viewModel);
39 </script>
40 
41 
42 
43   

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

 

文章结束给大家分享下程序员的一些笑话语录： 大家喝的是啤酒，这时你入座了。
你给自己倒了杯可乐，这叫低配置。
你给自已倒了杯啤酒，这叫标准配置。
你给自己倒了杯茶水，这茶的颜色还跟啤酒一样，这叫木马。
你给自己倒了杯可乐，还滴了几滴醋，不仅颜色跟啤酒一样，而且不冒热气还有泡泡，这叫超级木马。
你的同事给你倒了杯白酒，这叫推荐配置。
菜过三巡，你就不跟他们客气了。
你向对面的人敬酒，这叫p2p。
你向对面的人敬酒，他回敬你，你又再敬他……，这叫tcp。
你向一桌人挨个敬酒，这叫令牌环。
你说只要是兄弟就干了这杯，这叫广播。
有一个人过来向这桌敬酒，你说不行你先过了我这关，这叫防火墙。
你的小弟们过来敬你酒，这叫一对多。
你是boss，所有人过来敬你酒，这叫服务器。
酒是一样的，可是喝酒的人是不同的。
你越喝脸越红，这叫频繁分配释放资源。
你越喝脸越白，这叫资源不释放。
你已经醉了，却说我还能喝，叫做资源额度不足。
你明明能喝，却说我已经醉了，叫做资源保留。
喝酒喝到最后的结果都一样
你突然跑向厕所，这叫捕获异常。
你在厕所吐了，反而觉得状态不错，这叫清空内存。
你在台面上吐了，觉得很惭愧，这叫程序异常。
你在boss面前吐了，觉得很害怕，这叫系统崩溃。
你吐到了boss身上，只能索性晕倒了，这叫硬件休克。