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

这可以通过淘汰模板完成。

查看this fiddle：

在你的情况下，它将是这样的：

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

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

Answer 2

您可以使用以下自定义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/

警告：为避免跨站点脚本攻击，请不要从用户输入构造递归绑定。

Knockoutjs：如何以递归方式绑定到html绑定

2 个答案: