You want to use APIs? Want to create dynamically pages on the fly? Want to do it without overwhelming the browser? Here's how....
Note: Here is this same example done with jsRender. jsRender is now the stated direction for templating by the jQuery team. Thanks to @ziodave for pointing this out. Despite that, I am leaving this original post intact because it may still be useful to somebody.
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 the 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.
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.
eachloops. To get the most of our them, you should really read up on the template APIs and examples.
I hope you found this helpful. As always, you can leave a comment or send a message to email@example.com.
Now, go be brilliant!