Note: This is a long winded question and requires a good understanding of the MVVM “design pattern”, JSON and jQuery….
So I have a theory/claim that MVVM in DHTML is possible and viable and want to know if you agree/disagree with me and why. Implementing MVVM in DHTML revolves around using ajax calls to a server entity that returns JSON and then using html manipulation via javascript to control the html.
So to break it down. Lets say I’m building a search page that searches for People in a database…..
The View would look something like this:
<body viewmodel="SearchViewModel">
Search:<br />
<input type="text" bindto="SearchString" /><br />
<input type="button" value="Search" command="Search" />
<br />
<table bindto="SearchResults">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>${FirstName}</td>
<td>${LastName}</td>
</tr>
</tbody>
</table>
</body>
Using some non standard attributes on my html elements, I have declaritively defined a View and how it will interact with my ViewModel. I’ve created a MVVM parser in javascript that interprets the non-standard attributes and associates the View with a JSON object that represents the ViewModel.
The ViewModel would be a JSON object:
//View Model SearchViewModel would be assocaited with View because of <body viewmodel="SearchViewModel">
var SearchViewModel = {
//SearchString variable has a TwoWay binding
//to <input type="text" bindto="SearchString" /><
//if a user types into the text box, the SearchString property will "auto-magically" be updated
//because of the two way binding and how the element was interpreted via my MVVM parser
SearchString: '',
//SearchResults has a OneWay binding to <table bindto="SearchResults">
SearchResults: new Array(),
//Search function will get "auto-magically" get called because of
//the command binding to <input type="button" command="Search" />
Search: function() {
//using jquery to call into the server asynchronously
//when the server call is completed, the PopulateSearchResults method will be called
$.getJSON("www.example.com/SearchForPerson",
{ searchString: SearchViewModel.SearchString },
SearchViewModel.PopulateSearchResults);
}
PopulateSearchResults: function(data) {
//set the JSON array
SearchViewModel.SearchResults = data;
//simulate INotifyPropertyChanged using the MVVM parser
mvvmParser.notifyPropertyChanged("SearchResults");
}
}
The Model can be any server side asset that returns JSON…in this example, I used asp MVC as a restful facade:
public JsonResult SearchForPerson(string searchString)
{
PersonDataContext personDataContext = new PersonDataContext(); //linq to sql.....
//search for person
List<Person> results =
personDataContext.Persons
.Where(p => p.FirstName.Contains(searchString)
|| p.LastName.Contains(searchString))
.ToList();
return Json(results);
}
So, again the question:
Is MVVM possible/viable in a DHTML RIA application (no Silverlight/WPF) or have I lost my mind?
Could this “MVVM framework” be a good idea?
Proof of Concept: kaboom.codeplex.com.
This would probably be a good time to link to knockout JS, which is a javascript mvvm framework.
You may also want to look at backbone, a javascript MVC framework: