2016-07-19 30 views
0

我一直在玩弄使用Knockout的bindingProvider API綁定自定義元素,就像實驗一樣,看看我是否可以使模板更具可讀性。敲除綁定提供程序預處理器與ko:如果綁定

我的處理器一般工作正常,至少對於大多數綁定,但對於綁定,它不起作用。

標記是:

<k-o text="Text" click="clickHandler"></k-o> 

<k-o if="IsShowing"><!-- Doesn't work --> 
    <p> 
    Hello 1! 
    </p> 
</k-o> 

<span data-bind="if: IsShowing"><!-- Works --> 
    <p> 
    Hello 2! 
    </p> 
</span> 

而且代碼:

ko.bindingProvider.instance.preprocessNode = function(node) 
{ 
    if (node.nodeName == 'K-O') 
    { 
     var el = document.createElement('span');  
     var att = document.createAttribute('data-bind'); 

     var attvals = []; 

     for(var i = 0; i < node.attributes.length; i++) 
     attvals.push(node.attributes[i].name + ': ' + node.attributes[i].value); 

     att.value = attvals.join(', '); 
     el.setAttributeNode(att); 

     node.parentNode.replaceChild(el, node); 

     return el; 
    } 
} 

演示小提琴:https://jsfiddle.net/whelkaholism/wzqL64ga/

所以文結合,並單擊綁定做工精細,不過雖然如果我檢查對象檢查器和生成的if節點與硬編碼的相同,只有硬編碼的節點工作。

(這個用例是用於後端數據庫訪問的應用程序,開發製作功能模板更清晰的自定義元素的任何搜索引擎優化或相關的問題是不相關的。)

回答