Knockout框架中如何实现HTML绑定内嵌套data-bind？

你当前的代码里，通过html绑定插入的HTML内容中的data-bind并没有被Knockout解析，所以页面只会显示初始内容，不会执行绑定逻辑加载动态内容。

你的现有代码 #

HTML结构 #

<div class="xyz-template" data-bind="html:myViewModel().htmlTemplate"></div>

ViewModel代码 #

function myViewModel() {
    self.htmlTemplate = ko.observable();
    self.initialize = function () {
        self.htmlTemplate(`
          <p data-deId="de-box-5" data-bind="html: myViewModel().getDynamicContent()">
            Initial content
          </p>
        `);
    };

    self.getDynamicContent = function() {
       return "dynamic content";
    };
};

解决方案 #

方法1：手动调用ko.applyBindings解析插入的HTML #

当更新htmlTemplate后，等待DOM完成渲染，找到插入的目标元素，手动对其应用Knockout绑定。修改initialize方法如下：

self.initialize = function () {
    self.htmlTemplate(`
      <p data-deId="de-box-5" data-bind="html: getDynamicContent()">
        Initial content
      </p>
    `);
    // 等待DOM更新后执行绑定解析
    setTimeout(() => {
        const targetEl = document.querySelector('[data-deId="de-box-5"]');
        if (targetEl) {
            ko.applyBindings(self, targetEl);
        }
    }, 0);
};

注意：绑定表达式可以简化为getDynamicContent()，无需再引用myViewModel()，因为此时绑定上下文已经是当前ViewModel实例。

方法2：自定义绑定处理嵌套HTML的绑定解析 #

创建一个自定义绑定替代原生html绑定，自动解析插入内容中的data-bind属性：

ko.bindingHandlers.htmlWithBindings = {
    init: function() {
        return { controlsDescendantBindings: true };
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // 插入HTML内容
        const htmlContent = ko.unwrap(valueAccessor());
        element.innerHTML = htmlContent;
        // 对当前元素的子节点应用Knockout绑定
        ko.applyBindingsToDescendants(bindingContext, element);
    }
};

修改HTML中的绑定为自定义绑定：

<div class="xyz-template" data-bind="htmlWithBindings: myViewModel().htmlTemplate"></div>

ViewModel的initialize方法可保留原有写法，同样简化绑定表达式：

self.initialize = function () {
    self.htmlTemplate(`
      <p data-deId="de-box-5" data-bind="html: getDynamicContent()">
        Initial content
      </p>
    `);
};

关键提示 #

• Knockout原生html绑定仅负责插入HTML内容，不会自动解析其中的data-bind属性，必须主动触发绑定解析逻辑。
• 手动调用ko.applyBindings时，需确保DOM已完成更新，使用setTimeout或ko.tasks.run可等待Knockout的渲染周期结束。
• 自定义绑定的方式更适合需要频繁动态插入带绑定HTML的场景，复用性更强。

内容的提问来源于stack exchange，提问作者Saeid