Knockoutjs.com - Hello World Example

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

by dougiei

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class='liveExample'>   
    <p>First name: <input data-bind='value: koname' /></p> 
    <p>Last name: <input data-bind='value: koname2' /></p> 
    
    
    <button data-bind="click: formclear">Clear</button>
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
    
     <h2>Hello, <span data-bind='text: koname'> </span>!</h2> 
     <h2>Hello, <span data-bind='text: koname2'> </span>!</h2> 
    
</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

// Here's my data model
function init() {

	this.koname = ko.observable('FRED');
  this.koname2 = ko.observable('fred');
  this.objname={};
  
   this.clearname  = function() {
   		this.konamme();
   		this.koname2();
    
   };
   
   this.getname = function () {
    
    this.objname.first = this.koname();
    this.objname.last = this.koname2();
  
    return (this.objname);
   };
   
    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.koname() + " " + this.koname2();
    }, this);
       
    return (getname, clearname);
    
};



var ViewModel = function(first, last) {

     init(); 

    this.name = {};
    this.name.f = first;
    this.name.l = last;
    
   
    console.log(init);
    console.log('get name :', getname());
    
    
  console.log(init.getname);
   console.log(koname2());
   koname2('new name');

  
    
   
    
       
  
  this.formclear = function() {
     console.log("clearing..");
     this.firstName('');
     this.lastName('');
  }
};
 
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work