Menu
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.
289
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:
198
Take a look at the ASP.NET data binding features in .NET 4.0 - comes out with Visual Studio 2010. This is exactly what you are looking for if you are ok with MS technology.
Blog that details the feature
Community technology preview on codeplex
Theoretically you could just include the ASP.NET AJAX js file from your HTML files & make the solution cross-platform.
So to directly answer your question - it absolutely is a viable solution to the problem of creating maintainable, loosely coupled web user interfaces. And yes, the server side of your application is doing less - it becomes more of a true service layer, where all it deals with is data exchange. This is actually a good thing, b/c it promotes reuse across clients. Imagine your WPF app and your web app using the same middle tier server to send/receive data? Clients have a lot of available processing power anyway - why not leverage it to make you solution more scalable (the less the server is doing, the more work your clients are doing, which is distributed across ALL clients)
The tricky part is two way binding - where you hook into the event that some object had changed, and the event that something in the user interface has changed (user typed something into an input control, for example). One way binding would still be useful.
It seems like Microsoft is the only company right now building a full solution in the pattern you want. Yahoo's YUI library does do data binding that is semi-coherent, but not in the same pattern as WPF/Silverlight like you have built.
20
It looks possible and viable, with the only downside being that your code is relying on a whole lot of client side processing to get to the end result.
In my opinion, you're still a whole lot better of using a server side MVC architecture rather than trying to create a client side MVVM framework.
1
I'm using a similar concept and added JQuery Templating & DataLink (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as-official-jquery-plugins.aspx) to the equation as a way to have clean views and declarative binding (the binding part is giving me some problems, but I think it might work fine).
Using this in an scenario where I have to consume services async, and I'm really liking it.
I'm wondering how your MVVM Parser looks like, I used a pub/sub plugin for communications.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
