Knockout Arrays Demo

by mrrodd

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.debug.js"></script>
<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>

<ul data-bind="template: {name: 'listTempl', foreach: list}">
</ul>

<script id="listTempl" type="text/html">
    <li data-bind="text: name"></li>
</script>

JavaScript

$(function() {
    var data = [
        {name: "Bob"},
        {name: "Joe"},
        {name: "John"}
    ];

    var viewModel = {
        list: ko.observableArray(data),
        addItem: function() {
            this.list.push({
                name: "Steve"
            });
        },
        removeItem: function() {
            this.list.pop();
        }
    };

    ko.applyBindings(viewModel);

});