In line templating

Given the data array

let myDataArray = [
    { name: "Bannana" },
    { name: "Apple" },
    { name: "Orange" },
]

And the template

<ul data-bind-for="myDataArray">
    <li>{{ name }}</li>
</ul>

The output will be

<ul data-bind-for="myDataArray">
    <li>Bannana</li>    
    <li>Apple</li>
    <li>Orange</li>
</ul>

The children of any element that includes data-bind-for will be extracted from the template as a new template. The element containing data-bind-for will then have the JQuery .empty()function called on it.

The new child template will then be reinserted into the parent for each occurance in the array object passed as the parameter of the data-bind-for, recieving the contentes or each array element as data to be bond to it.