How to manually add a compiled knockout pattern in the DOM?

Question

I am using Salvattore jQuery Masonry to display elements in a grid. Items are displayed using a knockout pattern prior to initializing Salvattore.

For instance:

<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>

but whenever an element changes, I need to manually add the element using the following 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>

but for this I need to have an appropriate knockout pattern. How can I compile my knockout template manually to add it using the salvattore.appendElements method? Or is there a workaround I can use?

Note. The jQuery Salvator Freemasonry handles the DOM rendering in the grid itself, so knockout will have no effect after the plugin is initialized.

Answer 1

renderTemplate DOM:

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