javascript - 如何在DOM中手动添加Compiled Knockout Template？

Question

我正在使用 Salvattore jQuery Masonry在网格中显示项目。在初始化 Salvattore 之前，使用 Knockout 模板呈现项目。

例如:

<div id="grid">
    <!-- ko foreach: aItems -->
    <div>
       <div data-bind="template: { name: 'xyz-template', data: $data }">
    </div>
    <!-- /ko -->
</div>

<script>
    salvattore.registerGrid(document.getElementById("grid"));
</script>

但每当项目发生变化时，我都必须使用以下脚本手动添加项目

<script>
    var grid = document.querySelector('#grid');
    var item = document.createElement('article');

    // Note in my case item is going to be my complied knockout template
    salvattore.appendElements(grid, [item]);
</script>

但要这样做，我需要有 Complied Knockout 模板。我如何手动编译我的 Knockout 模板，以便我可以使用 salvattore.appendElements 方法添加它？或者我可以使用任何解决方法吗？

注意:Salvattore jQuery Masonry 本身处理网格中的 DOM 渲染，因此插件初始化后，knockout 不会有任何效果。

Answer 1

您是否尝试过使用 renderTemplate knockout 函数以编程方式在给定的 DOM 元素中呈现模板:

ko.renderTemplate("xyz-template",itemData,{},item,"replaceChildren");