Kombination von Text und html von Knockout

Question

Dies ist, wie ich meine html

<a href="#">John <i class="person"></i></a> 

Und mit knockout.js bauen will das ist, was ich getan habe.

<a data-bind="text:name"><i class="person"></i></a> 

Wie Sie ganze Elemente erraten kann (nicht nur Text) von Anker entfernt im Innern des Ankers becuse Text Bindung in diesem Fall ganze Tags entfernt. Meine Lösung ist unten.

<a data-bind="html: name() + '<i class="person"></i>'"></a> 

string concat mit html in datenbindung ist eine lösung, aber es hat 2 große nachteile. 'name' propery ist nicht sicher, also können wir html injection bekommen. Sedondly HTML innerhalb der Datenbindung Attribute schreiben ist saugt.

Eine andere Lösung ist.

<a href="#"><span data-bind="text:name"></span><i class="person"></i></a> 

Ich weiß, wir führen neue HTML Markup für nur Lösung. Es ist das, was ich am besten gefunden habe.

Was ist die bekannte Lösung für dieses Problem in knockout.js?

Können wir angeben, nur Text nicht ganze Elemente darin zu Textbindung über Parameter zu aktualisieren?

Oder bessere Lösung?

Answer 1

Die Verwendung der Spannweite ist die bevorzugte Lösung. Wenn die Textbindung nicht den gesamten Inhalt ersetzt, ist es schwer zu wissen, was zu aktualisieren ist und nicht, wenn das nächste Mal geändert wird. Wenn Sie immer mit dem ersten untergeordneten Knoten des Elements arbeiten möchten, können Sie eine kleine benutzerdefinierte Bindung schreiben, um zu helfen.

Hier ist eine einfache prependText Bindung. Dies würde immer den ersten untergeordneten Knoten des Elements ersetzen, das die Bindung enthält. Sie sollten also sicherstellen, dass der erste Knoten mindestens ein Leerzeichen ist.

ko.bindingHandlers.prependText = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     //replace the first child 
     element.replaceChild(document.createTextNode(value), element.firstChild); 
    }   
}; 

Verwenden Sie es mögen:

<a href="#" data-bind="prependText: name"> <span> another element</span></a> 

Probe: http://jsfiddle.net/rniemeyer/5CfzH/

Answer 2

Sie können auch KO verwenden "behälterlosen" Notation

<!-- ko text: YourProperty --> 
<!-- /ko--> 

Das gleiche kann mit anderen Bindungen erfolgen (wie foreach): See Part 4