Creating a dynamic jQuery Mobile list view with ColdFusion, Mustache templates and JSON data
comments (8) Views: 17,246
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.
The ColdFusion code
There's two main parts to the ColdFusion code. Let's look at it first, then dissect what it's doing.
Because this demo uses jQuery Mobile we set our jQuery code inside a live binding for pageinit, rather than the typical
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!
If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!