Knockoutjs.com - Hello World Example

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

by Kaeden

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr>
            <td data-bind="text: name"></td>
            <td></td>
        </tr>
    </tbody>
</table>

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; font-weight: bold; font-size: 1.2em; }

JavaScript

// Here's my data model
/* var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
 
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
}; */

var ViewModel = function(rows) {
	this.rows = ko.observable(rows);
}

ko.applyBindings(new ViewModel([
{name: 'one'},
{name: 'two'},
{name: 'three'}
]));

 
/* ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work */