Snowing Code

Personal notes on software development

Progressive enhancement for JQuery templates with ASP.NET MVC

(Publish date: 16/10/2011)

It's been some time now that I'v been looking at backbone.js, playing with the framework and trying to discover its capacities. One of the most important resources in this learning process is the line of posts Derick Bailey has been writing about backbone. One of the recent topics Derick was discussing was using jquery templates for rendering backbone views, while prioritising accessibility and progressive enhancement. In a nut shell, Derick was suggesting using partials for rendering jquery templates, which will then allow us to load them as fixtures in our jasmine tests. The only problem I had with this solution was that I was using ASP.NET MVC and didn't have a ruby rack application rendering the templates while running the tests and didn't want to depend on external (and duplicated) rails controllers to assign my view model properties with the '${PropertyName}' jquery template keys. I was also wondering whether this could be done differently. So I started looking for a solution in MVC but didn't get any further. So I set up to write my own solution for this problem.

The idea I came up with is very simple- a controller extension method that will render the template by simply extracting the template/partial view file content and replacing all the template ${} keys with their respective properties values. So every occurance of the template key ${FirstName}, for example, will be replaced with the view model FirstName propery value.
How does the code look like then? It couldn't be any easier. First off, in your global asax file, in application start, add one of the following options:

And in your controller, when you want to use one of your templates to display a certain model or a list of models, do the following:

The later gist will fetch the content of SomeTemplate.ascx in the path you decided to use in your global.asax, replace all the keys with the model properties (per model you've provided it with) and eventually will return a ContentResult with the html you're after.

Ok, so apart of allowing us to have jasmin tests that load our templates only when needed without having to maintain some rails/other ruby controllers, why should I use this solution? Well, the first thing I like about this is that it makes the whole code that assigns the properties with the template keys (model.FirstName = "${FirstName}";) redundant and does not force you to have string properties. Feels cleaner to me.

One last thought- some may think these solutions still suffer from one serious shortcoming, which is not supporting more complex code in our templates; they only allow us to have properties. Is this a fault or a problem though? Should we really allow 'proper' code in our templates, beyond the model properties? I'm not sure. Can you think of any scenarios, esp. in backbone, where you won't be able to encapsulate any 'templpate code' into your model? How would you solve such a situation?

blog comments powered by Disqus