Close

Not a member yet?Register now and get started.

lock and key

Sign in to your account.

Account Login

jsRender, JSON APIs, and jQuery Mobile

3 Jan. 2012 Posted by Shane Gliser in mobile, jquery mobile, jsrender, json

results screensearch screen

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.

Author's Note:

Creating Mobile Apps with jQuery Mobile by Shane GliserPackt Publishing recruited me to write a book on jQuery Mobile!

Once you've read this article and found it useful, you should order my book. It's full of real world examples that span several industries and technologies using jQuery Mobile. The eBook editions are cheap and obviously, you know where to come if you have follow up questions ;-)

Check out Creating Mobile Apps with jQuery Mobile

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!

Comments

Submitted by DPS (not verified) on Tue, 01/10/2012 - 04:10 #

Brilliant... Thank you very much :-)

Submitted by Christophe (not verified) on Thu, 01/12/2012 - 07:13 #

Helpful and consistent, well done ! Thanks ;-)

Submitted by Nate (not verified) on Fri, 02/03/2012 - 13:24 #

jsRender is saving me from a whole lot of HTML mixed up in the code. 
Now, I am looking for a best way to dynamically load templates (i.e. not have all templates load up front).  Is there a standard way to do this? 

Submitted by Shane Gliser on Mon, 02/06/2012 - 22:13 #

I don't know that there is a "best" way to do it but you could always load the contents like this...
 

<script id="flickrTemplate" type="text/x-jquery-tmpl"></script>
<script type="text/javascript">
$("#flickrTemplate").load("flickTemplate.jsrender");
</script>

Submitted by Johan Keiser (not verified) on Sun, 05/06/2012 - 12:36 #

thanks for jsrender!

Submitted by kiran (not verified) on Thu, 02/09/2012 - 23:02 #

The Demo on View in action
 
Does not work for IE and also in Firefox and Chrome On submit of the Query does not reflect the next page
 
May be the Flicker API is outdated ???

Submitted by Shane Gliser on Mon, 02/13/2012 - 20:38 #

Your comment got me concerned but I just checked it in IE9, Chrome 16, FireFox 6, iPhone 4s, and Android 2.2.  No problems on any of them.  Honestly, this wasn't really about making a product that works everything. It's just a quick example to show how to pair these technologies together.   

Post new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
Are you a human? Let's just be sure...