Knockout

Knockout Mapping Plugin

by harsh dand

HTML

<p>Number <span data-bind="text:friends().length"></span></p>
<ul data-bind="foreach:friends">
    <li data-bind="text:name"></li>
    <input type="checkbox" data-bind="checked:knowJs"/>
    <input data-bind="value:lib, visible:knowJs"/>
    <button data-bind="click:removeFriend">x</button>
</ul>
<button data-bind="click:addFriend,enable:friends().length<5">Add Friend</button>

JavaScript

function Friend(name){
    this.name = name;
    this.knowJs = ko.observable(false);
    this.lib = ko.observable('');
    this.removeFriend = function(){
        person.friends.remove(this);
    }
}
    var person = {
        firstName: ko.observable('Harsh'),
        lastName: ko.observable('Dand'),
        friends:ko.observableArray([new Friend('Nish'),new Friend('Wajid')])
    };

person.addFriend = function(){
   person.friends.push(new Friend('new')) ;
}

    ko.applyBindings(person);