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

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

Using The Silverlight DataGrid with MVVM


View Model and the Silverlight DataGrid

The Silverlight DataGrid is a powerful control that allows inline editing, paging, sorting, and drag and drop re-ordering of columns. It can be challenging to understand when using normal code behind techniques, but sometimes downright baffling when using View Model / MVVM style programming.

In the following examples, we will not directly reference the DataGrid in the View Model. The code we will create can be consumed by any collection control such as a ListBox.

It’s Not The DataGrid You Want to Manipulate – It’s the Collection Bound To The DataGrid

For more -> Using The Silverlight DataGrid with View Model / MVVM – CodeProject

In conclusion – View Model – Less Code, Really!

Hopefully you can see that View Model is not hard at all. It really is not complicated once you see how it is done. Expression Blend was designed to work in "View Model Style", so you should have an easier time using Expression Blend when you use this simple pattern.

While it may seem easier to implement a DataGrid using code behind, you will usually find that you will need to create a lot of code to locate and modify values and properties in the DataGrid.

Controls such as the DataGrid are designed to Bind to collections. View Model is designed to implement binding. It’s the Binding that saves you code. Once a Binding is created, it will perform functionality automatically. you do not have to explicitly write code for each piece of functionality. Most importantly, you will Bind to, and gather parameters, directly from the DataGrid element that you are ultimately concerned with, rather than hooking into an event and then hunting for the real value you are looking for.

Furthermore, you will realize that a lot of programmatic functionality, is best implemented, on the underlying data source not the DataGrid it’s self.

Also note, this example uses standard web services, you can easily use WCF or WCF RIA Services. The View and the View Model would still be exactly the same.

Silverlight Master Child View View Model Communication


An example of Silverlight View Model communication between Master and Child View Models

Simple View Model Communication

With using "View Model Style" programming it may be a little confusing as to how you can communicate between View Models. There are various methods available, but this article explores what I hope to be an easy simple method.

Via Silverlight View Model Communication – CodeProject

Introduction to Attached Behaviors in the context of MVVM


There is also a great and yet simple article that shows how attached behaviors is used to capture an element’s right-click event and Bind it to a MVVM ICommand property.

Introduction to Attached Behaviors in the context of MVVM

Download demo project

For example, suppose that the user searches through a TreeView for an item whose display text matches a user-defined search string. When the search logic finds a matching item, the matching ViewModel object will have its IsSelected property set to true. Then, via the magic of data binding, the TreeViewItem associated with that ViewModel object enters into the selected state (i.e., its IsSelected property is set to true, too). However, that TreeViewItem will not necessarily be in view, which means the user will not see the item that matches their search string. So how can we have the TreeViewItem brought into view when the ViewModel determines that it is in the selected state.

The ViewModel objects have no idea that a TreeViewItem exists, and is bound to them, so it does not make sense to expect the ViewModel objects to bring TreeViewItems into view. The question becomes, now, who is responsible for bringing a TreeViewItem into view when the ViewModel forces it to be selected?

Attached Behaviors

The solution to the problem explained above is to use an attached behavior. Attaching a behavior to an object simply means making the object do something that it would not do on its own.

The idea is that you set an attached property on an element so that you can gain access to the element from the class that exposes the attached property. Once that class has access to the element, it can hook events on it (e.g. TreeViewItem’s Selected event) and, in response to those events firing, make the element do things that it normally would not do. It is a very convenient alternative to creating and using subclasses, and is very XAML-friendly.

So how do we attach the behavior to every TreeViewItem in the TreeView? 
By adding a Setter to the Style applied to every TreeViewItems
  <Style TargetType="{x:Type TreeViewItem}">
    This Setter applies an attached behavior to all TreeViewItems.

Introduction to Attached Behaviors in WPF – CodeProject

Does MVVM deserve the hype?

Ah, MVVM! MVVM is the rock star who packs the house at every XAML event. It’s in books, blog posts, and podcasts. You can’t swing a dead laptop without hitting someone who is spouting about the virtues of model-view-viewmodel. With so much hype, there’s bound to be backlash.

Does MVVM deserve the hype?

Short answer – no.

An Alternative?

You’ve got a complex UI with lots of rules, and you reject the MVVM best practice crap the whiteboarding architect is jamming down your throat. You’re gonna be … pragmatic!

More …