Collections example

Render a collection using the foreach binding.

by Diya_Khan

HTML

<div class = "dvcollections">
    <h2><u>Collections:</u></h2>
    <br />
    <ul data-bind="foreach : parentList ">
        <li>
            <div>
            <span data-bind="text:name"></span> has <span data-bind="text: children().length"></span> childrens:
            <a href="#" data-bind="click: addChild">Add Child </a>
            </div>
            <ul data-bind="foreach : children">
                <li>
                    <span data-bind="text: $data"></span>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

li { list-style-type: square; margin-left: 20px; }

JavaScript

var parent = function(name,children)
{
    this.name = ko.observable(name);
    this.children = ko.observableArray(children);
    
    this.addChild = function(){
        this.children.push("New Child");
            }.bind(this);                                
}

var viewModel = {
    parentList : [
            new parent("List1",["A","B","C"]),
            new parent("List2",["D","E","F"]),
            new parent("List3",["G","H","I"])        
    ],
    showRenderTime : ko.observable(false)
};

ko.applyBindings(viewModel);