HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 2 - Solar System Animation built with SVG, Knockout and MVVM Pattern.

/// <reference path="knockout-2.1.0.debug.js" />

// setting up the namespace
var solarSystemBodyNmspace = solarSystemBodyNmspace || {};

// set the view models to an empty object
solarSystemBodyNmspace.solarSystemBodyVM = {};

// let us have the solar system object contain only name and details  
// as well as the computed fullDescription field, for the sake of simplicity
solarSystemBodyNmspace.solarSystemBodyVM = {
    name : ko.observable("Earth"),
    details: ko.observable("the planet we live on") 
};

// computed observables should be defined outside
// of JSON object definition in order for 
// 'this' reference to be correct.
// first argument to the ko.computed function is the function 
// for calculating the computed observable property.
// Second argument passes an object that becomes "this" pointer inside the function.
// This is needed, since the "this" pointer in JavaScript is much more fluid than
// "this" pointer or reference in C++ or C#/Java.
solarSystemBodyNmspace.solarSystemBodyVM.fullDescription = ko.computed(function () {
    return this.name() + ": " + this.details();
}, solarSystemBodyNmspace.solarSystemBodyVM);