What is a view model?

I was wondering, what is a typical view model in the pattern MVVM? I thought it was something like a presentation helper that renders model information into HTML displayable format, but some tutorials found on the web are somewhat confusing and do not seem to match the definition I thought it was. So anyone here using MVVM pattern? Id appreciate a thorough explanation with some sample/dummy code, thanks.

I’ve only heard of the generally recognized MVC model, so I had to look it up. Apparently, it started out being specific to Microsoft’s .NET WPF design environment. It doesn’t appear to be too applicable to PHP since it isn’t an application language, isn’t tied to a GUI, and you can’t use a WYSIWYG to design business logic (for PHP).

http://stackoverflow.com/questions/2677716/why-arent-the-mvp-and-mvvm-patterns-seen-in-ruby-python-or-php

You might also find this article (written by SitePoint member TomB) interesting: http://r.je/evolving-mvc-into-mvvm.html

Generally speaking, the term “View Model” is interchangeable with “Application Model” and is actually the M part in MVC. That is, it holds the application state rather than the domain state. Essentially, in most real world applications there are two types of model. MVC doesn’t differentiate because it’s purely designed to handle the GUI part of the application and doesn’t care whether you encapsulate a domain model in the application model or not, it’s all part of the model layer.

The MVVM pattern recognises that there should be two models at an architectural level, which is beneficial. However, as for MVVM itself, this pattern merges the controller and the ViewModel into a single layer. I had looked into this quite significantly, but came to the conclusion that although MVVM is a valid and useful pattern, it creates additional problems relating to separation of concerns by not having a controller. If your ViewModel has controller responsibilities its reusability becomes limited because your controller actions are now model actions, which causes all kinds of potential issues when you want to set your model’s state in multiple ways.

I’ll supply some dummy code, but the first step to understanding the concept of a ViewModel (or MVC model) is, contrary to a lot of popular frameworks is the understanding that the view gets its own data from the model This applies to both MVC and MVVM. In MVVM the ViewModel is equivalent to the model and the controller in MVC.

Ok, let’s take a trivial example, searching a list of forum posts:

Firstly a model. This is the domain logic, it encapsulates domain state and supplies generic methods for finding/mutating it.


class PostsModel {
	private $pdo;
	
	public function __construct(PDO $pdo) {
		$this->pdo = $pdo;
	}
	
	public function findByTitle($title) {
		return $this->pdo->query('SELECT * FROM posts WHERE title LIKE :title', array(':title' => $title))->findAll();
	}
}

The viewmodel:


class ViewModel {
	private $posts;	
	private $criteria;
	
	
	public function __construct(PostsModel $posts) {
		$this->posts = $posts;
	}
	
	public function getPosts() {
		return $this->posts->findByTitle($this->criteria);
	}
	
	
	public function search() {
		$this->critiera = $_POST['title'];
	}
	
}

In MVVM, the router would route directly to a method call on the ViewModel rather than to a controller action. So search() would be called by the router/dispatcher rather than a specific controller.

Finally, the view would get its data from the viewmodel:


<table>
<?php 
foreach ($viewModel->getPosts() as $post) {
	?>
	<tr>
		<td><?php echo $post->title; ?></td>
	</tr>
	
	<?php 
}
?>
</table>

As you can see, the ViewModel stores the application state (What the search criteria is) and knows the interface of the domain model. It uses a generic finder method on the domain model to supply some more specific data to the view itself. The ViewModel may format the data in a specific way for the view.

tldr; it’s the same separation of concerns as MVC, however, MVVM dictates that the Controller and the Model are actually a single responsibility because controllers are not usually stateful and only set state on a model while also acknowledging that the domain state and application state are two very different things.

@ TomB: Thank you so much for providing such a thorough explanation of MVVM. So basically the ViewModel has both responsibilities of a MVC-Controller and an application model, while in MVC the Model contains both domain and application model? I do realize that there are two types of models in a large application, I appreciate your educative post above.