learn.knockoutjs.com - intro tutorial

http://learn.knockoutjs.com/#/?tutorial=intro

by olli

HTML

<script src="http://learn.knockoutjs.com/Scripts/Lib/jquery.tmpl.js"></script>
<script src="http://learn.knockoutjs.com/Scripts/Lib/jquery.address.js"></script>
<script src="http://learn.knockoutjs.com/Scripts/Lib/knockout-1.3.0.latest.js"></script>
<link rel="stylesheet" href="http://learn.knockoutjs.com/Content/App/coderunner.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css">
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<body> 
    <div data-role="page">
        <div data-role="header">
            <h1>
                Tutorial 1
            </h1>
        </div>
        <div data-role="content">
            <!-- This is a *view* - HTML markup that defines the appearance of your UI --> 
            <div class="content-textbox">
                First name: <span data-bind="text: firstName"></span><br/>
                Last name: <span data-bind="text: lastName"></span>
            </div>
            
            <div data-role="fieldcontain">
                <label for="firstName">First name</label>
                <input id="firstName" data-bind="value: firstName" />
            </div>
            <div data-role="fieldcontain">
                <label for="lastName">Last name</label>
                <input id="lastName" data-bind="value: lastName" />
            </div>
            
            <div class="content-textbox">
                Full name: <span data-bind="text: fullName"></span>
            </div>
            
            <button data-bind="click: capitalizeLastName">Go caps</button> 
        </div>
    </div>
</body>

CSS

.content-textbox {
    background: none repeat scroll 0 0 #F9F9F9;
    box-shadow: 0 0 3px #CCCCCC;
    line-height: 1.2em;
    margin-bottom: 15px;
    margin-top: 10px;
    padding: 8px;
}

JavaScript

(function() { // Wrap in function to prevent accidental globals
    // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    var viewModel = {
        firstName: ko.observable("Bert"),
        lastName: ko.observable("Bertington"),

        capitalizeLastName: function() {
            var currentVal = this.lastName();
            this.lastName(currentVal.toUpperCase());
        }
    };

    viewModel.fullName = ko.dependentObservable(function() {
        return this.firstName() + " " + this.lastName();
    }, viewModel);


    // Activates knockout.js
    ko.applyBindings(viewModel);
})();