Question

我正在开发一个需要根据特定值动态生成HTML的应用程序。我有以下代码，我想要动态HTML：

<div data-bind="html: extraHTML"></div>

我的javascript文件中有一个对象设置，其中包含各种HTML代码块，一旦应用程序启动就会被选中。例如，对象之一包含以下内容：

{ type: 'Int', html: '<input style=\'margin: 0\'type=\'number\' min=\'0\' data-bind=\'value: selectedExtra, valueUpdate: \'input\'\' />' }

当我运行应用程序时，我没有收到任何错误，并且HTML被正确绑定，但是，当我在输入字段中插入一个值时，可观察到的选择的文本＆＃39;没有更新。当我替换包含＆＃34; html＆＃34;的div标签时与以下内容绑定：

<input style="margin: 0" type="number" min="0" data-bind="value: selectedExtra, valueUpdate: 'input'">

可观察的更新很好地做到了这一点。我想知道的是，无论如何都要动态分配一个＆＃34;值＆＃34;绑定在＆＃34; html＆＃34;绑定并实际更新值。也许我错过了另一种解决方案？

非常感谢任何帮助，谢谢！

的更新 的

我创建了一个jsfiddle来演示问题here。

Answer 1

当你调用applyBindings时，ko遍历dom节点以“绑定”到元素。您的html已生成，因此永远不会为这些元素调用ko.applyBindings。

您有两种选择： - 使用wayne评论的模板，（推荐） - 如果你真的想从一个observable生成html并绑定ViewModel，你可以使用自定义绑定。您实际上是在这里创建一些自定义模板系统。

<强> HTML：

<div data-bind="htmlTemplate:html"></div>

<强> bindinghandler：

ko.bindingHandlers.htmlTemplate = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
       // NOTE: you could return false and ommit the update code, it probably works, but this way you have more control what happens when the html is updated
       return { controlsDescendantBindings:true };
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // remove old bindings
        ko.cleanNode(element);

        // update the inner html, unrwap to support observables and/or normal properties            
        element.innerHTML=ko.unwrap(valueAccessor());

        // apply the view model to the content of the element
        ko.applyBindingsToDescendants(viewModel,element);
    }
};

的jsfiddle： http://jsfiddle.net/martijn/6b87vw3L/

Knockout.js - “html”绑定中的“值”绑定

1 个答案: