bentzy bentzy - 7 months ago 48
Javascript Question

Recursive template with knockout js

Is it possible to create a recursive template only with knockout js?

I have a knockout object:

function FormElementNode(children, text, value) {
var self = this;
self.children = ko.observableArray(children);
self.text = ko.observable(text);
self.value = ko.observable(value);
}


children is an array of FormElementNode.

I want to draw it and it's children recursively in a hierarchy list nodes:

<ul>
<li>Parent text value:
Children:
<ul>
<li>Child1 text value</li>
<li>Child2 text value</li>
</li>


Thanks!

Answer

Yes KnockOut supports recursive templates so you can reference and render the same template inside the template.

An example html in your case would look like this:

<script id="formElementNodeTemplate" type="text/html">
<ul>
    <li>Parent <span data-bind="text: text"></span> 
               <span data-bind="text: value"></span>
        <br/>
        Children:
        <!-- ko template: { name: 'formElementNodeTemplate',  
                            foreach: children } -->
        <!-- /ko -->        
     </li>
   </ul>
</script>    

<div data-bind="template: { name: 'formElementNodeTemplate', data: $data }">
</div>

Demo JSFiddle.