Lawrence

Knock out Samples

by lawrence pond

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
Name
<input type="text" data-bind="value:name, valueUpdate: 'afterkeydown'" />
<input type="checkbox" data-bind="checked: nameVisible" />
<p>Hello World, <span data-bind="text: name,visible:nameVisible"></span>

    <br> <span data-bind="text:displayName"></span>

</p>
<button data-bind="click: changeName">Change Name</button>

JavaScript

$(function () {
    var viewModel = {
        name: ko.observable("bob"),
        changeName: function () {
            this.name("steve");
        },
        nameVisible: ko.observable(true)
    };
    viewModel.displayName = ko.dependentObservable(function () {
        return this.name() + " is" + (!this.nameVisible() ? "not" : "") + " visible";
    }, viewModel);

    ko.applyBindings(viewModel);
});