Skip to content

On Client Side Templating Part II: mustache, json, jquery and some fun

by Pascal Deschenes on May 15th, 2011
mustache

In my previous post, I’ve promised to come up with a simple case to bring forth my points . So here we go, a simple application which gets both json model and view off the server, render its content on the client side using mustache.js then dynamically change the document model using jQuery. You might be interested in looking at the result over my sandbox.

Model and View

First of, we have the following json model. In real life, instead of a static file, model would be returned from a REST service request

Then, in order to separate content from the layout, we use a template view which contains the actual markup along with data placeholders. While there are better alternatives, mustache is our template language for this basic example.

Rendering

Rendering now becomes only a matter of applying this model into our template using the mustache library. In the controller, a method is defined to perform this operation:

DOM Update

Then, once you have the rendered markup, simply replace your dynamic content found in a div container and you should be good to go!

Not a revolution but I really like this and I’m sure I’ll explore some more in that direction.

You might also be interested in the following related posts:

From → development, howto