Knockoutjs.com - Hello World Example

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

by Jorgelig

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>
<div class='liveExample'>   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <p>Phone: <input type='tel' data-bind='maskedInput: phone, mask: "(999) 999-9999"' /></p>
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
</div>
<div data-bind='text: ko.toJSON($root)'>

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

JavaScript

ko.bindingHandlers.maskedInput = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers.value.init(element, valueAccessor, allBindings, viewModel, bindingContext);
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
		ko.bindingHandlers.value.update(element, valueAccessor, allBindings, viewModel, bindingContext);
		$(element).mask(allBindings.get('mask'));
        valueAccessor()($(element).val());
    }
};

var ViewModel = function() {
    this.firstName = ko.observable("");
    this.lastName = ko.observable("");
    this.phone = ko.observable("");
 
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
    
    this.firstName('John');
    this.lastName('Doe');
    this.phone('1231231234');
}; 
ko.applyBindings(new ViewModel());