Knockoutjs.com - Hello World Example

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

by arjuncc

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<table border="1">
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: hello.aryLst">
        <tr data-bind="if: $index() % 2 == 1">
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>

JavaScript

function People(){
var self = this;
 self.firstName = ko.observable("4");
 self.lastName = ko.observable("4");
}

function Hello(){
var self = this;
    self.aryLst = ko.observableArray([]);
}

var p1 = { firstName: 'Bert', lastName: 'Bertington' };
var p2 = { firstName: 'Bert', lastName: 'Bertington' };
var p3 = new People();
p3.firstName('arjun');
p3.lastName('cc');
var p4 = { firstName: 'Bert 4', lastName: 'Bertington 4' };
var p5 = { firstName: 'Bert 5', lastName: 'Bertington 5' };
var p6 = { firstName: 'Bert 6', lastName: 'Bertington 6' };
var p7 = { firstName: 'Bert 7', lastName: 'Bertington 7' };
var p8 = { firstName: 'Bert 8', lastName: 'Bertington 8' };


var hello = new Hello();

hello.aryLst.push(p1);
hello.aryLst.push(p2);
hello.aryLst.push(p3);
hello.aryLst.push(p4);
hello.aryLst.push(p5);
hello.aryLst.push(p6);
hello.aryLst.push(p7);
hello.aryLst.push(p8);



/*
var hi = {
        hello: [
            p1,p2,p3,
            { firstName: 'Charles', lastName: 'Charlesforth' },
            { firstName: 'Denise', lastName: 'Dentiste' }
        ]
    };*/

ko.applyBindings(hello);