Knockout.js Observable Demo

by nitronic

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.js"></script>
<p>My first name is <span data-bind="text: firstName"></span>.</p>
<p>My last name is <span data-bind="text: lastName"></span>.</p>

<button data-bind="click: changeItem">Change</button>

<p>Find my weblog @ <a data-bind="attr: { href: blogUrl, title: blogName }">here</a>.</p>

JavaScript

var personViewModel = {
    firstName: ko.observable('Norbert'),
    lastName: ko.observable('Eder'),
    blogUrl: ko.observable('http://devtyr.norberteder.com'),
    blogName: ko.observable('DevTyr'),

    changeItem: function() {
        this.firstName('Norbert Updated');
    }
};

ko.applyBindings(personViewModel);