Knockout - Observable Arrays

by Pratik Bhattachary

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<input type="text" data-bind="value: newName"/>
<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove Last</button>

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

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

JavaScript

$(function() {
    var data = [{name: "Pratik"}, {name: "Sayan"}, {name: "Varun"}];
    
    var viewModel = {
        newName: ko.observable(''),
        list: ko.observableArray(data),
        addItem: function() {
            this.list.push({name: this.newName()});
        },
        removeItem: function() {
            this.list.pop();
        }};
    ko.applyBindings(viewModel);   
});