bentzy bentzy - 5 months ago 30x
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:

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



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">
    <li>Parent <span data-bind="text: text"></span> 
               <span data-bind="text: value"></span>
        <!-- ko template: { name: 'formElementNodeTemplate',  
                            foreach: children } -->
        <!-- /ko -->        

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

Demo JSFiddle.