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.
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...
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.
newpage.attr( "data-" + $.mobile.ns + "external-page", true ).one( 'pagecreate', $.mobile._bindPageRemove );
$.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.
$.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.
<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.
Now, go be brilliant!
P.S. Anja Skrba was kind enough to translate this article into Serbo-Croatian. Thanks, Anja!