Html JavaScript Development using MVVM

Shawn Wildermuth talks about using KnockoutJS framework to develop a MVVM application:

KnockoutJS is a framework that allows me to use HTML-based data binding markup to describe my UI, CSS to describe what the design looks like and JavaScript to tie the data to the data binding. The is chiefly accomplished through the concept of observable objects. For example, I created a new JavaScript ‘class’ called gameModel in my view.js by creating members using the observable method on the knockout (e.g. ko) object:

// view.js
$(document).ready(function () {

  function gameModel() { = ko.observable(); = ko.observable();
    this.genre = ko.observable(); this.releaseDate = ko.observable();
    this.price = ko.observable();
    this.imageUrl = ko.observable();

The observable call returns an object that not only can store a property, but let the KnockoutJS binding stack know when the property changes (two way binding). In order to use the gameModel ‘class’, I created a view model to store a collection of gameModels like so:
// Define Main ViewModel
var theViewModel = {
  games: ko.observableArray([]),

The games property of the view models ‘class’ will hold the current list of games that are shown in the UI. The observableArray object is like the observable object but it notifies the data binding stack when a collection changes. The goal here is to have the view model load the games from the REST service and as the collection changes, the HTML should change to react to that. No more manually creating/destroying parts of the markup.

In order to make this work, we must use the data binding syntax in the HTML code:

<div data-bind="foreach: games">
  <div class="game-block">
      <img data-bind="attr: { src: imageUrl, alt: name }" /></div>
    <div class="game-name" data-bind="text: name">

For more:

Developer’s Guide to Microsoft Prism 4.0

The documentation for Prism 4 has been completely rewritten and includes the architectural overview, design, and technical concepts for composite applications, applied patterns, two chapters covering Model-View-ViewModel (MVVM), application navigation, Stock Trader Reference Implementation (Stock Trader RI) and MVVM Reference Implementation (MVVM RI) overview, QuickStart overviews, and deployment topics. Much of this guidance is applicable even if you are not using the Prism Library, but you want to know best practices for creating composite applications

Prism 4.0 – November 2010

The guide contains the following topics:


Class Library References:

Desktop Class Library

Phone Class Library

Silverlight Class Library

MVVM-Friendly DomainDataSource: DomainCollectionView

Yes, that’s right… we now have a component that is a big step toward addressing the request for an MVVM-Friendly DomainDataSource.  As of this posting, that feature was the #2 requested item on the RIA Services wish list, and we’ve been pondering its design for a long time.  Kyle McClellan has delivered on this and he is posting details to his blog.  This feature is completely separate from the DomainDataSource, and it’s built from the ground up with ViewModel usage in mind.

Here are some specific links from Kyle’s blog:

Here are the links you need to get up and running:

    Install WCF RIA Services SP1 for Silverlight 4

Silverlight 4 Reference Architecture


A 24k Powerful MVVM Framework which solves a variety of real-world problems


Caliburn Micro: A Micro-Framework for WPF, Silverlight and WP7

A small, yet powerful implementation of Caliburn designed for WPF, Silverlight and WP7. The framework implements a variety of UI patterns for solving real-world problems. Download here.

Documentation here

A video that talks about some of the features of the MVVM framework – the post and the video