Knockout data-binding

A simple example of data-binding in Knockout.

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div class="liveExample">
    
<p>Enter name and tab out of field</p>    
<p>Name: <input data-bind='value: name'/></p>
<p id='e'>Welcome to KnockoutJS <span data-bind='text: name'></span></p>

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

JavaScript

//('#e').Hide();// Here's my data model


('#e').Hide();//
var ViewModel = function(name) {
    this.name = ko.observable(name);   
  };
 
ko.applyBindings(new ViewModel(""));