Knockoutjs.com - Simple list example

http://knockoutjs.com/examples/simpleList.html

by shubh0602

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div class='liveExample'>
    <form>User Id(Numeric):
        <input data-bind='value: MyModule.user().Id' />
        <br/>First Name:
        <input data-bind='value: MyModule.user().FName' />
        <br/>Last Name:
        <input data-bind='value: MyModule.user().LName' />
        <br/>
        <button type="submit" data-bind="click: AddUser">Add</button>
        <p>Your Users:</p>
        <table border="1">
            <tr data-bind="foreach:MyModule.users">
                <td data-bind="text:Id"></td>
                <td data-bind="text:FName"></td>
                <td data-bind="text:LName"></td>
            </tr>
        </table>
    </form>
</div>

CSS

body {
    font-family: arial;
    font-size: 14px;
}
.liveExample {
    padding: 1em;
    background-color: #EEEEDD;
    border: 1px solid #CCC;
    max-width: 655px;
}
.liveExample input {
    font-family: Arial;
}
.liveExample b {
    font-weight: bold;
}
.liveExample p {
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}
.liveExample select[multiple] {
    width: 100%;
    height: 8em;
}
.liveExample h2 {
    margin-top: 0.4em;
}

JavaScript

var MyModule = (function () {
    var user = ko.observable();
    var users = ko.observableArray([]);
    var UserModel = function (item) {
       
        var self = this;
        self.FName = ko.observable((item.FName != undefined) ? item.FName : "Shubh");
        self.LName = ko.observable((item.LName != undefined) ? item.LName : "DG");
        self.Id = ko.observable((item.Id != undefined) ? item.Id : "999");
    };
    //Call initialize method from .ready
    function init() {

        MyModule.user(new UserModel(""));

        ko.applyBindings(MyModule());
    }


    function AddUser(data) {
        
        console.log(MyModule.user());
        MyModule.users.push(user);
    }
    // explicitly return public methods when this object is instantiated
    return {
        Init: init,
        AddUser: AddUser,
        user: user,
        users: users
    };

})();

//  example usage
MyModule.Init(); // Call the INIT method for mymodule