Question

我们假设有一个简单的HTML模板：

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

我使用（例如组件＆＃34; content-a＆＃34; ）注册两个组件：

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

然后我将HTML模板注入指定的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

但是，在应用绑定时会呈现所有已注册的组件。

有没有办法按需渲染组件？不适用于applyBindings。

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

Answer 1

我偶然发现了这篇文章，因为它描述了类似我遇到的问题。我们将视图模型绑定到特定元素，因为它可能存在也可能不存在;为了让组件绑定，我只是背负着这个，这就是我实现这个目标的方法：

有一个集合来存储你想要的元素

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);
}

Answer 2

默认情况下，会显示添加到DOM的所有组件。如果你想隐藏它们直到满足特定条件，你可以这样做 -

yourView.html -

<section class="sales" data-bind="visible: isRendered">
    <div data-bind="text: sales"></div>
</section>

yourViewModel.js -

define([], function () {
  return { 
    isRendered: ko.observable(false),
    sales: ko.observable()
  }
});

组件注册 -

ko.components.register('yourComponent', {
    viewModel: { require: 'files/yourViewModel' },
    template: { require: 'text!files/yourView.html' }
});

然后您可以更改组件的值isRendered observable以使其显示 -

vm.isRendered(true);

当然这都是伪代码，但如果你为你想要做的事做了一个工作小提琴，我可以帮助解释更多。我上面的代码展示了如何使用模块加载器构建组件，但希望它有意义。

KnockoutJS：在applyBindings之后注入模板（组件）

2 个答案: