javascript - knockout : inject template (component) after applyBindings

Question

假设有一个简单的 HTML 模板:

<div>
    <content-a></content-a>
    <content-b></content-b>
</div>

我使用以下方式注册两个组件(例如组件“content-a”):

ko.components.register('content-a', {
    viewModel: { instance: vm }, // ViewModel for that component
    template: template // template of that component
});

然后我将 HTML 模板注入(inject)到指定的 HTML 元素中:

var node = document.getElementById('content');
node.innerHTML = template; // here "template" represent just a HTML string (described at the very top)
ko.applyBindings(vm, node); // here vm represents ViewModel instance

但是，当我应用绑定(bind)时，所有已注册的组件都会呈现。

有没有办法按需渲染组件？应用 applyBindings 时不会。

换句话说:我想渲染主要内容，applyBindings，然后根据需要添加和渲染新组件。

Answer 1

我偶然发现了这篇文章，因为它描述了与我遇到的问题类似的内容。我们将 View 模型绑定(bind)到特定元素，因为它可能存在也可能不存在；为了让组件绑定(bind)，我只是顺势而为，以下是我实现这一目标的方法:

有一个集合来存储您需要注意的元素

var self = this;
self.modulesToLoad = [];
self.elements = [];

检查元素是否存在并具有小功能

self.checkIfElementExists = function (element, viewModel) {
    if (element != undefined) {
        self.modulesToLoad.push(viewModel);
        self.elements.push(element);
    }
};

声明你的组件

ko.components.register("custom-component", {
     template: { require: "text!Components/custom-component/custom-component.html" },
    viewModel: { require: "Components/custom-component/custom-component" }
});

添加到集合中，检查元素是否存在

self.checkIfElementExists($("custom-component")[0], 
                          "Components/custom-component/custom-component"); // A little bit of repetition here, but do you care?

最后循环遍历集合

for(var i = 0; i  < elements.length; i++) {
    var viewModel = new arguments[i]();
    var element = elements[i];
    ko.applyBindings(viewModel, element);
}