假设有一个简单的 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,然后根据需要添加和渲染新组件。
最佳答案
我偶然发现了这篇文章,因为它描述了与我遇到的问题类似的内容。我们将 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);
}
关于javascript - knockout : inject template (component) after applyBindings,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26251302/