17

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.

Improve this question

4 Answers 4

Reset to default
11

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:

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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.

Improve this answer

2 Comments

That's actually really nice. I'm kinda squeamish about being tied into an AdoDotNetDataContext. I was going to take a jQuery plug-in approach to the frame work for my MVVM implementation.
These days, being ok with MS technology is like being ok with the black death.
1

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.

Improve this answer

4 Comments

"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". Yea... by no means would you want to make your entire site use this kind of infrastructure...but when doing asynchronous interactions, this MIGHT be a better alternative than MVC.
Agreed. It may get confusing mixing client side frameworks like this with server side frameworks like MVC (if the syntax and page markup look similar)...but that's not a good enough reason not to give it a shot.
Thanks for the input. Sometimes I feel like I'm in an echo chamber and your input is greatly appreciated.
Sometimes saying stuff out loud is the best way to validate it.
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.