Knockout Binding Provider Präprozessor mit ko: if Bindung

Question

Ich habe herum gespielt mit Knockout bindingProvider API zu binden benutzerdefinierte Elemente, nur als ein Experiment wirklich, und um zu sehen, ob ich Vorlagen ein wenig lesbarer machen kann.

Mein Prozessor funktioniert im Allgemeinen gut, zumindest für die meisten Bindungen, aber für die if-Bindung funktioniert es nicht.

Das Markup ist:

<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> 

Und der Code ist:

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; 
    } 
} 

Demo Fiddle: https://jsfiddle.net/whelkaholism/wzqL64ga/

So der Text-Bindung und Bindungs ​​funktionieren klicken, aber obwohl, wenn ich überprüfen der Objektinspektor und die generierten Knoten für das if sind identisch mit den hartcodierten, nur die hartcodierten funktionieren.

(Dieser Anwendungsfall dafür ist für Anwendungen, Back-End-Datenbankzugriff, so dass funktionale Vorlagen deutlicher in der Entwicklung jeder SEO oder damit zusammenhängende Fragen von benutzerdefinierten Elemente nicht relevant sind.)

Answer 1

Sie haben nur vergessen eines:

el.innerHTML = node.innerHTML; 

https://jsfiddle.net/wzqL64ga/8/