Creating a dynamic jQuery Mobile list view with ColdFusion, Mustache templates and JSON data

andyMatthews.net

Creating a dynamic jQuery Mobile list view with ColdFusion, Mustache templates and JSON data

If you're like me and build web apps all day then the notion of templates and how to use them has likely reared it's head before. Best practices tell you to keep your markup and your code separate but how is that possible when your code mixes server side and client stuff together? In some cases the same exact HTML needs to be output from both sides. How do you accomplish that without duplicating efforts? Luckily we have Mustache templates (and others) to save us from ourselves. In this blog post I'm going to show you how you can leverage a single Mustache template for use in both ColdFusion and JavaScript.

Download the code

Let's start with a demo shall we (I started my project with the jQuery Mobile Boilerplate project). This example pulls the 20 most recent items from my Twitter feed in JSON format (hey, this is MY blog post after all). There's a toggle which allows you to switch back and forth between a list view generated by ColdFusion, and another that's pulled directly from Twitter via jQuery using the $.getJSON method. None of that is all that impressive, it's code that each of us probably written dozens of times, or more. What's really cool is that both ColdFusion and jQuery are using the same Mustache template.

What exactly IS Mustache? Their description, "Logic-less templates", leaves a little something to be desired. Essentially it's a way to abstract your HTML into a string of text which can be iterated over for a data set. Each item in the data set uses the same template, but replaces the contents of the template with the proper variables. The great thing is that Mustache is just a spec which can, and is, implemented in any language. ColdFusion has Mustache.cfc and JavaScript has Mustache.js. Let's look at the template this demo uses.

Mustache can be much more intricate than this simple example, but I wager that for most developers this is about all that we need. In the example above, every string contained within double braces (or mustaches), is a variable name that will be replaced for each pass in a loop. Mustache expects an object containing variables with these names. In ColdFusion this is a struct, in JavaScript it's an object.

The ColdFusion code

There's two main parts to the ColdFusion code. Let's look at it first, then dissect what it's doing.

In the first part we set up Mustache.cfc, the template string, pull down the Twitter data, and deserialize it. The second part is a simple loop, with the only difference is that we're not mixing HMTL code into our loop. Mustache takes care of that for us. Pretty simple isn't it? The JavaScript code is almost as simple. Let's check that out now.

The JavaScript code

Because this demo uses jQuery Mobile we set our jQuery code inside a live binding for pageinit, rather than the typical $(document).ready() block. The first thing this code does is call out to Twitter.com to get the feed. We're using JSONP (or JSON with padding) to get around JavaScipt's cross domain policy. This lets us call Twitter without requiring a server side proxy. Inside the success callback for the feed request, we make another AJAX call to load in the template. When that template data comes back we simply loop over it using jQuery's $.each() method. The guts of that loop look JUST like the ColdFusion code. We create an intermediate object which gets passed into Mustache. The only difference is that instead of directly outputting, or appending, the string of HTML we're concatenating it into a long string of HTML. Lastly, we append the string of HTML to the UL one time, then call the refresh method of the jQuery Mobile listview.

Pro-tip: Concatening HTML in this manner prevents jQuery from making an insert call to the UL tag for every loop, a costly practice.

So there you have it. While this demo uses only a single template you can easily see how valuable this approach would be in a large application. So get out there and start using templates!