Knockoutjs：如何绑定到 html 递归绑定答案

【问题标题】：Knockoutjs: How to bindings to html bind recursivelyKnockoutjs：如何绑定到 html 递归绑定
【发布时间】：2012-03-30 13:38:11
【问题描述】：

我想使用 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/

谢谢，绿色

【问题讨论】：

检查这个 jsfiddle.net/jvVeQ/1 ，我没有给出这个答案，因为我不确定这个“递归”绑定是否会导致内存泄漏。顺便问一下，你想达到什么目的？
我正在创建一个在线表单设计器。每个控件的设计时 html 是使用 html 绑定动态注入的。在这部分我想继续使用 ko 来管理状态变化。顺便说一句，谢谢你的回答！
也许您可以将控件作为模板放在 html 文件中，然后使用模板绑定来选择要呈现的内容（例如 data-bind="template: fieldType"）
类似jsfiddle.net/guigouz/kEWK6
guigouz 和 Artem，您应该将这些作为答案发布。

标签： javascript html binding knockout.js

【解决方案1】：

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

看看this fiddle:

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

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

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

【讨论】：

【解决方案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/

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

【讨论】：