Knockoutjs: Wie man Bindungen an HTML rekursiv binden

Question

Ich möchte Html-Inhalte dynamisch mit Html-Bindung hinzufügen, und innerhalb dieser Html-Inhalte habe ich andere Ko-Bindungen angewendet werden. jedoch der folgende Code funktioniert nicht wie erwartet:

<div data-bind="html: html"></div>
<script type="text/javascript">
var vm = new function(){
    this.html = ko.observable("hello <span data-bind='text: text'></span>");
    this.text = "world";
};
ko.applyBindings(vm);
</script>

jsfiddle ist verfügbar: http://jsfiddle.net/jvVeQ/

danke, Grün

Answer 1

Dies kann durch Knockout-Vorlagen geschehen.

Werfen Sie einen Blick auf diese Fiedel :

In Ihrem Fall sieht es etwa so aus:

<div data-bind="template: 'myTemplate' "></div>

<script id="myTemplate" type="text/html">
    <span data-bind='text: text'></span>
</script>

Answer 2

Sie können die folgende benutzerdefinierte Knockout-Bindung verwenden, die der eingebauten entspricht html verbindlich, außer dass controlsDescendantBindings es false anstelle von true :

ko.bindingHandlers['htmlRecurse'] = {
    'init': function() {
        return { 'controlsDescendantBindings': false };
    },
    'update': function (element, valueAccessor) {
        ko.utils.setHtml(element, valueAccessor());
    }
};

Fiedel: http://jsfiddle.net/jvVeQ/16/

Vorsicht! Um Cross-Site-Scripting-Angriffe zu vermeiden, sollten Sie keine rekursiven Bindungen aus Benutzereingaben konstruieren.