learn.knockoutjs.com - intro tutorial

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

by BrownieBoy

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">
<body class="codeRunner"> 
    <!-- This is a *view* - HTML markup that defines the appearance of your UI --> 
    
    <p>First name: <span data-bind="text: firstName"></span></p> 
    <p>Last name: <span data-bind="text: lastName"></span></p> 
    
    <p>First name: <input data-bind="value: firstName" /></p> 
    <p>Last name: <input data-bind="value: lastName" /></p> 
    
    <p>Full name: <span data-bind="text: fullName"></span></p> 
    
    <button data-bind="click: capitalizeLastName">Go caps</button> 
    
     <button onclick="doAction();">Test</button> 
    
</body>

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);
})();


function doAction() {
    var x = 1;
}