Knockout.js

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 被正确绑定但是，当我将一个值插入输入字段时，可观察 'selectedExtra' 确实不更新。当我用以下内容替换包含 "html" 绑定的 div 标签时：

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

observable 更新就可以了。我想知道的是，是否有在 "html" 绑定中动态分配 "value" 绑定并实际更新值的方法。也许我错过了另一种解决方案？

任何帮助将不胜感激，谢谢！

更新

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

Answer 1

调用applyBindings时，ko会遍历dom个节点到"bind"个元素。您的 html 已生成，因此永远不会为这些元素调用 ko.applyBindings。

您有两个选择： - 使用韦恩评论的模板，（推荐） - 如果您真的想从可观察对象生成 html 并绑定 ViewModel，您可以使用自定义绑定。您实际上是在此处创建一些自定义模板系统。

html:

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

绑定处理程序：

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 - "value" 绑定在 "html" 绑定中

Knockout.js - "value" binding within an "html" binding

html

javascript

data-binding