Recursive Templates

by WizKid81

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<ul data-bind="template: { name: 'itemTmpl', foreach: $data.hierarchyNodes }"></ul>
<script id="itemTmpl" type="text/html">
    <li> <span data-bind = "text: Name"> </span>
        <ul data-bind="template: { name: 'itemTmpl', foreach: $data.hierarchyNodes }"></ul > </li>
</script>Add item:
<input type="text" data-bind='value:itemToAdd' />
<button type="submit" data-bind="click: addItem">Add</button>

CSS

li {
    margin-left: 10px;
}

JavaScript

var response = JSON.parse('[{"ID_Field":3,"Parent_ID":2,"Name":"University of Nebraska - Lincoln        ","HasChildren":1},{"ID_Field":4,"Parent_ID":2,"Name":"University of Nebraska at Kearney       ","HasChildren":1},{"ID_Field":7,"Parent_ID":2,"Name":"University of Nebraska at Omaha         ","HasChildren":1},{"ID_Field":6,"Parent_ID":2,"Name":"University of Nebraska Central Admin    ","HasChildren":1},{"ID_Field":5,"Parent_ID":2,"Name":"University of Nebraska Medical Center   ","HasChildren":1}]')

console.log(response);

var viewModel = {
    itemToAdd: ko.observable(),
    hierarchyNodes: ko.observableArray(),
    addItem: function () {
        this.hierarchyNodes()[0].hierarchyNodes = JSON.parse('[{"ID_Field":3,"Parent_ID":2,"Name":"University of Nebraska - Lincoln        ","HasChildren":1},{"ID_Field":4,"Parent_ID":2,"Name":"University of Nebraska at Kearney       ","HasChildren":1},{"ID_Field":7,"Parent_ID":2,"Name":"University of Nebraska at Omaha         ","HasChildren":1},{"ID_Field":6,"Parent_ID":2,"Name":"University of Nebraska Central Admin    ","HasChildren":1},{"ID_Field":5,"Parent_ID":2,"Name":"University of Nebraska Medical Center   ","HasChildren":1}]');

        console.log(this.hierarchyNodes());
    }

}

var hier


$(response).each(function (index, element) {
    viewModel.hierarchyNodes.push(element);
})

console.log(viewModel.hierarchyNodes());

var data = {
    items: [{
        name: "One",
        items: [{
            name: "OneA"
        }, {
            name: "OneB",
            items: [{
                name: "OneB1"
            }, {
                name: "OneB2"
            }]
        }]
    }, {
        name: "Two",
        items: [{
            name: "TwoA",
            items: [{
                name: "TwoA1"
            }, {
                name: "TwoA2"
            }]
        }, {
            name: "TwoB"
        }]
    }]
};

ko.applyBindings(viewModel);