Knockoutjs.com - Hello World Example

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

by pointbypointuk

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div class='liveExample'>
    <p>First name:
        <input data-bind='value: firstName' />
    </p>
    <p>Last name:
        <input data-bind='value: lastName' />
    </p>
    <p>Third name:
        <input id="input3" data-bind='value: thirdName' />
    </p>
    <input type="button" id="btn" value="3rdname set">
     <h2>Hello, <span data-bind='text: fullName'> </span>!</h2> 
     <h4> <span id="log"> </span></h4> 
</div>

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;
}
input {
    margin:10px;
    padding:10px;
}

JavaScript

$(document).ready(function () {

    var ViewModel = function (first, last) {
        this.firstName = ko.observable(first);
        this.lastName = ko.observable(last);
        this.thirdName = ko.observable();
        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.thirdName();
        }, this);
    };

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


    $("#log").text("log started - ");

    $("#btn").click(function (e) {
        var thirdAnswer = prompt('what for the third name ? ');
        //objectModel.thirdName(thirdAnswer);
        $("#input3").val(thirdAnswer).change();
        console.log('hello');
    });

});



// Here's my data model