Knockoutjs: Как привязки к html привязать рекурсивно

Question

Я хочу добавить html-контент динамически, используя html-привязку, и внутри этого html-контента у меня есть другие ko-привязки, которые нужно применить.однако следующий код не работает должным образом:

<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: http://jsfiddle.net/jvVeQ/

спасибо, Зеленый

Answer 1

Вы можете использовать следующую пользовательскую привязку Knockout, которая аналогична встроенной привязке html, за исключением того, что controlsDescendantBindings равно false вместо true:

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

Скрипка: http://jsfiddle.net/jvVeQ/16/

Внимание: Чтобы избежать атак с использованием межсайтовых сценариев, не создавайте рекурсивные привязки из пользовательского ввода.

Answer 2

это можно сделать с помощью шаблонов нокаута.

Посмотрите на эту скрипку :

В вашем случае это будет примерно так:

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

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