Knockout.js and Revealing Module Pattern

Sample Example of Knockout and Revealing Module Pattern Javascript

by shubh0602

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="well well-small">Sample Example of Knockout and Revealing Module Pattern Javascript</div>
    </div>
    <div class="row">
        <div class="span12">First name
            <input type="text"  data-bind="value:User().First" />
        </div>
    </div>
    <div class="row">
        <div class="span12">
            <div class="span6">Last name
                <input type="text"  data-bind="value:User().Last" />
            </div>
        </div>
    </div>
    <button type="submit" class="btn" data-bind="click:fnAddUser">Add User</button>
    <table class="table">
        <thead>
            <tr>
                <td>Id</td>
                <td>First</td>
                <td>Last</td>
            </tr>
        </thead>
        <tbody data-bind="foreach:UserList">
            <tr>
                <td data-bind="text:Id"></td>
                <td data-bind="text:First"></td>
                <td data-bind="text:Last"></td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var MyModule = function () {
    var UserList = ko.observableArray([]);
    var User = ko.observable();
    var temp = [{
        First: "Shubh",
        Last: "Dasgupta",
        Id: "1"
    }, {
        First: "Sunil",
        Last: "MD",
        Id: 2
    }, {
        First: "Neeraj",
        Last: "M",
        Id: 3
    }];
    init = function () {
        User(new UserModel(temp[0]));
        UserList.removeAll();
        $.each(temp, function () {
            UserList.push(new UserModel(this));
        });
        ko.applyBindings(this);
    };
    fnAddUser = function () {
        console.log("Fill New User Details");
        console.log(User());
        User().Id=Math.floor((Math.random()*100)+1); 
        UserList.push(new UserModel(User()));
    };
    return {
        UserList: UserList,
        init: init,
        fnAddUser: fnAddUser,
        User: User
    }
}();
MyModule.init();

function UserModel(data) {
    var self = this;
    self.Id = data.Id;
    self.First = data.First;
    self.Last = data.Last;
}