Die Kombination von text-und html-durch Ko

Dies ist, wie ich bauen will meine html - 

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

Und mit knockout.js dies ist, was ich getan habe.

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

Als Sie sich vorstellen können ganze Elemente(nicht nur text) der Anker wird entfernt, weil der text verbindlich in diesem Fall ganz-tags innerhalb der Anker wird entfernt. Meine Lösung ist unter.

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

string concat mit html in data-bind ist eine Lösung, aber es hat 2 große Nachteil. 'name' Anwesen ist nicht sicher, so dass wir bekommen, html-injection. Sedondly schreiben von html innerhalb des data-bind-Attribute saugt.

Andere Lösung ist. 

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

Weiß ich, dass wir die Einführung neuer html-markup für eine gerechte Lösung. Es ist das, was ich gefunden habe, am besten.

Was ist der bekannte Lösung für dieses problem knockout.js ?

Können wir geben Sie nur text aktualisieren, nicht die ganze-Elemente in text verbindlich über Parameter ?

Oder bessere Lösung ?

InformationsquelleAutor Freshblood | 2012-08-24
  1. 9

    Mithilfe der span ist die bevorzugte Lösung. Wenn der text verbindlich, nicht ersetzen, all die Inhalte, dann ist es schwer für Sie zu wissen, was zu aktualisieren, und aktualisieren nicht die nächste Zeit, dass es Veränderungen. Wenn Sie wollen, immer mit den ersten Kind-Knoten des Elements, dann könnten Sie schreiben, eine kleine benutzerdefinierte Bindung zu helfen.

    Hier ist eine einfache prependText verbindlich. Dies würde immer ersetzen, der ersten Kind-node des Elements mit der Bindung. Also, würden Sie wollen, um sicherzustellen, dass der erste Knoten wurde mindestens ein Leerzeichen.

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

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

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

    • Dies ist die richtige Lösung. Das aktuelle theme, das ich verwende, ist anders verhält, wenn ich extra span. Ich danke Ihnen sehr
    InformationsquelleAutor RP Niemeyer
  2. 6

    Können Sie auch verwenden, KO "containerless" notation

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

    Dasselbe kann man mit anderen Bindungen (z.B. foreach): Siehe Teil 4

    InformationsquelleAutor mrtig
Schreibe einen Kommentar