KnockoutJS

Rich client-side interactivity without messy event handlers
MVVM pattern - object-oriented JS and declarative bindings
IE6+ FF2+ Chrome Safari Opera ...
MIT License

Basic binding

Observables

More binding

Computed values

Lists (Shopping Cart)

Price calculations

Add/Remove

<h2>Items in your shopping cart (<span data-bind="text: items().length"></span>)</h2>
<div data-bind="foreach: items">
	<article> 
		<input data-bind="value: quantity" /> 
       	<span data-bind="text: name"></span> - 
       	<span data-bind="text: usdPrice"></span>
        <a href='#' data-bind="click: $root.remove">Remove</a>
   	</article>
</div>
<h3 data-bind="text: total"></h3>

<form id="form" data-bind="submit: add"><input id='name' /> <input id='price' /> <button type="submit">Add</button></form>

<script src="../js/lib/knockout.js"></script>
<script>
function item(name, price){
	var self = this;
	self.name = ko.observable(name);
    self.price = ko.observable(price);
    self.quantity = ko.observable(1);
    self.usdPrice = ko.computed(function() {
    	return "$" + (self.quantity() * self.price());
  	});
}

function shoppingCart(){
  	var self = this;
	self.items = ko.observableArray([
		new item("Pizza", 20),
		new item("Burger",  10)
	]);	
  
	self.total = ko.computed(function() {
   		var t = 0;
   		var items = self.items();
   		for(var i = 0; i < items.length; i++)
     		t += (items[i].price() * items[i].quantity());
   		return "$"+t;
 	});
  
	self.remove = function(item) {
		self.items.remove(item);
	}
	
	self.add = function() {
      var nameNode  = $('#name');
      var priceNode = $('#price');
      self.items.push(new item(nameNode.val(), priceNode.val()));
      nameNode.val('');
      priceNode.val('');
	}
}

ko.applyBindings(new shoppingCart());
</script>

Load/Save

<h2>Items in your shopping cart (<span data-bind="text: items().length"></span>)</h2>
<div data-bind="foreach: items">
	<article> 
		<input data-bind="value: quantity" /> 
       	<span data-bind="text: name"></span> - 
       	<span data-bind="text: usdPrice"></span>
        <a href='#' data-bind="click: $root.remove">Remove</a>
   	</article>
</div>
<h3 data-bind="text: total"></h3>

<form id="form" data-bind="submit: add"><input id='name' /> <input id='price' /> <button type="submit">Add</button></form>

<button data-bind="click: save">Save</button>

<script src="../js/lib/knockout.js"></script>
<script>
$.getJSON = function(addr, callback) {
	callback([{name: 'Pizza', price: 20}, {name: 'Burger', price: 10}]);
}
$.post = function(addr, data) {
  	console.log("Sending data to the server: "+JSON.stringify(data));
}

function item(data){
	var self = this;
	self.name = ko.observable(data.name);
    self.price = ko.observable(data.price);
    self.quantity = ko.observable(1);
    self.usdPrice = ko.computed(function() {
    	return "$" + (self.quantity() * self.price());
  	});
}

function shoppingCart(){
    var self = this;
	self.items = ko.observableArray([]);	
  
	self.total = ko.computed(function() {
   		var t = 0;
   		var items = self.items();
   		for(var i = 0; i < items.length; i++)
     		t += (items[i].price() * items[i].quantity());
   		return "$"+t;
 	});
  
	self.remove = function(item) {
		self.items.remove(item);
	}
	
	self.add = function() {
      var nameNode  = $('#name');
      var priceNode = $('#price');
      self.items.push(new item({name: nameNode.val(), price: priceNode.val()}));
      nameNode.val('');
      priceNode.val('');
	}
  
  	self.save = function() {
    	$.post("/saveItems", ko.toJSON(self));
	}
  
  	// load data
  	$.getJSON("/items", function(allData) {
        var mappedTasks = $.map(allData, function(data) { 
          return new item(data) 
        });
        self.items(mappedTasks);
    });
}

ko.applyBindings(new shoppingCart());
</script>

Custom Bindings

Rouben Meschian

rmeschian@gmail.com