koのノックアウトバインディングプロバイダプリプロセッサ

KnockoutのbindingProvider APIを使用してカスタム要素をバインドしています。これは実際の実験と同じですが、テンプレートをもっと読みやすくすることができるかどうかを確認しています。koのノックアウトバインディングプロバイダプリプロセッサ

私のプロセッサは、少なくともほとんどのバインディングでうまく動作しますが、ifバインディングでは動作しません。

<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の生成ノードはハードコードされたものと同じですが、ハードコードされたものだけが動作します。

は（このため、このユースケースは、開発に明確な機能のテンプレートを作り、バックエンドのデータベース・アクセス・アプリケーションのためにあるカスタム要素の任意のSEOや関連する問題は関係ありません。）

出典

2016-07-19 Whelkaholism