jsRender, JSON APIs, and jQuery Mobile

Want to create dynamically pages on the fly? Want to use jsRender? Want to do it without overwhelming the browser? Here's how....

jsRender is now the stated direction for templating by the jQuery team (as of Oct 2011). It is very powerful and picks up where jQuery Templates left off. Be sure to check out the many jsRender examples ranging from simple (like this one) to more complex implementations.

Note: this is an update to a previous post where I showed how to do the same thing with jQuery Templates. Thanks to @ziodave for filling me in on jsRender's recent supremacy over jquery templates.

For this example's base page, let's start out with the basic starting page from jquery mobile.

For an API, let's go with the example for getJSON from jQuery.

Next, call in the tempalte engine scripts...
<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>

Then, create a spot for your templated content to live...
<script id="flickrTemplate" type="text/x-jquery-tmpl">

When we make our getJSON call, we'll transform the contents of the template with the returned data from the API call and add it wherever we like.
$(document.body).append($("#flickrTemplate").render( data ));

Here is the finished code but please don't stop at just viewing the source, I've got a few key takeaways afterwards.

view this example in action

Important consideration for creating dynamic pages in jquery mobile

• jQuery Mobile does not (by default) instantly remove dynamically created pages like it does with pages that are simply ajaxed in through normal page-to-page navigation. This can be a blessing and a curse. It gives you something to go back to quickly so you don't have to re-render the content. However the more pages you create the closer you come to the point where your poor little mobile phone wont be able to take the strain due to the number of DOM elements. To make dynamically generated pages auto-remove like normal pages would, you'll need to execute this line of script from the example.
  This line is currently commented out in the source.
  
  newpage.attr( "data-" + $.mobile.ns + "external-page", true ).one( 'pagecreate', $.mobile._bindPageRemove );
  
  
• The source shows two differnet $.mobile.changePage calls.
  
  The first one: $.mobile.changePage("#"+data.pageId); will find the page through selectors and then transition to. The change will also be reflected in the URL and thus show up in history.
  
  The second one: $.mobile.changePage(newpage); is being passed a direct jquery object reference to the page. Using this method will cause a page transition to the new content but will not affect the URL and thus not show up as an update in history.
  
  
• jsRender Template content is held within a script tag and refernced by ID. <script id="flickrTemplate" type="text/x-jquery-tmpl"> jQuery Mobile does not try to parse or enhance the contents of these script files. The example is a single page example, even with these templates. It is not until templates are transformed with the data and the results are appended to the DOM that you can navigate to the pages.
  
  
• This example is creating full pages. However, there is no reason that you could not use these same techniques to create page fragments and inject them into any portion of any jquery mobile page. For instance, if you were hitting some API on a regular interval and only updating a page's listview, you could simply use a template transformation and replace or append to the current listview and then call $("#some_list").listview("refresh");
  
  

I hope you found this helpful. As always, you can leave a comment or send a message to hello@roughlybrilliant.com or find me on twitter @sgliser.

Now, go be brilliant!

P.S. Anja Skrba was kind enough to translate this article into Serbo-Croatian. Thanks, Anja!