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() {
    this.name = ko.observable();
    this.id = 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">
    <div>
      <img data-bind="attr: { src: imageUrl, alt: name }" /></div>
    <div class="game-name" data-bind="text: name">
    </div>
  </div>
</div>

For more: http://wildermuth.com/2011/11/20/Using_MVVM_on_the_Web_with_KnockoutJS

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:

More:

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

image

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

 image

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

image

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