Dynamic data in jQuery Mobile using jQuery Templates

Introduction

The fourth alpha of jQuery Mobile was released, which made the framework more or less stable and easy to use. The only thing that is still not enough is good documentation. For example, now there is described only standard workflow showing transitions on JQM pages. But what if you want to load data dynamically?
^{The article implies that you have at least a small idea of ​​what javascript is, how jQuery and JQM work.}

Instruments

So, the task is simple: pick up the data using XHR and show it to the user. To begin, let's try to see what we have at our disposal. These are jQuery and jQuery Mobile , which is essentially an extension of jQuery that adapts content for mobile devices. The easiest option will look something like this:

$. get ( '/ data / url' , function ( data ) {
for ( var item in data ) {
$ ( "#content" ) . append ( "<p>" + item + "</ p>" ) ;
}
} ) ;

And although in this example, everything is simple, in fact, this approach will require a lot of effort, lines of code, and therefore is not the best option. It would be much easier if we could just give the received data to some function, show the template and get beautiful HTML. And here jQuery Templates comes to our rescue, because that's what they do.

We try

So, let's try to write a page that will dynamically receive some data and show it to us using JQM. In order not to write your server-function-API, let's take an example from the documentation on the $ .getJSON () function, which takes data from Flickr and looks like this:

$. getJSON ( " api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" ,
{
tags : "cat" ,
tagmode : "any" ,
format : "json"
} ,
function ( data ) {
$. each ( data. items , function ( i , item ) {
$ ( "<img />" ) . attr ( "src" , item . media . m ) . appendTo ( "#images" ) ;
if ( i == 3 ) return false ;
} ) ;
} ) ;

Of course, we don’t need all that is inside function (data) {} , we will change this to templates.

Cooking site

First, let's see what comes from the service using console.log (data). Below is an abbreviated listing of the parts of interest.

Object
generator: "http://www.flickr.com/"
items: Array [20]
0: Object
author: "nobody@flickr.com (e m i m i)"
description: "<p> <a href="http://www.flickr.com/people/emimi/"> emimi </a> posted a photo: </ p> <p> <a href =" http ... "
link: "http://www.flickr.com/photos/emimi/5587960723/"
media: Object
m: "http://farm6.static.flickr.com/5307/5587960723_7d9c0a7a25_m.jpg"
tags: "cat romeo 貓 羅密歐 囉 咪 歐"

It turns out that there is an array of items , in which the data of interest lies. Let's say we want to make a list with thumbnails of pictures. Then each element from the array should be inside the <li> tag and the template will look something like the one shown in the listing below.

< script id = "dataTemplate" type = "text / x-jquery-tmpl" >
< li role = "option" >
<a href = "#">
< img src = "$ {media.m}" >
< h3 > $ {$ (description) .text ()} < / h3 >
< p > $ {tags} < / p >
< / a >
< / li >
< / script >

This template will display previews of images from Flickr, description as main text and tags as subtext. It is worth noting that jQuery Templates is a very powerful library that allows you to try jQuery itself inside your templates, for example, to clear the description from tags, as is done in the previous listing.
')

Add basic

Now you need to add a button to the page, by clicking on which all the magic will occur, and our empty list, which will be filled with data. It will look something like this:

< div data-role = "content" >
<a href = "#" data-role = "button" data-theme = "b" id = "load-data"> Load data < / a >
< ul data-role = "listview" data-inset = "true" id = "data-listholder" > < / ul >
< / div >

And to make it all work, add a little javascript. Explanations of how it works, just below.

1. // do all stuff on document ready
2. $ ( document ) . ready ( function ( ) {
3. $ ( "# load-data" ) . click ( function ( ) {
4. // show loading indicator
5. $. mobile . pageLoading ( ) ;
7. $. getJSON ( " api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?" ,
8. {
9. tags : "cat" ,
10. tagmode : "any" ,
11. format : "json"
12. } ,
13. function ( data ) {
14. // render data templates and append to list
15. $ ( "#dataTemplate" ) . tmpl ( data. items ) . appendTo ( "# data-listholder" ) ;
16. // refresh list view
17. $ ( "# data-listholder" ) . listview ( "refresh" ) ;
18. // hide loading indicator
19. $. mobile . pageLoading ( true ) ;
20. } ) ;
21. } ) ;
22. } ) ;

Lines 1-3 you should already be familiar - after loading the page, we hang the event listener on our button to press. By pressing the following occurs: first, the pageLoading () function shows a nice loading indicator. Then there is a request to Flickr, which receives our data. After receiving the data, the DOM element is selected using jQuery, which contains our template and the tmpl () function is used, which with the help of this template creates HTML onto the base of the items array from the received data. Created HTML using append () is added to our empty list. If you just add data to the list, we will get pretty ugly HTML (you can try to comment out line 17 in js code and request data), because jQuery Mobile draws everything after the page loads, or at the request of the script. Therefore, we must say that we want to refresh our list using a listview ('refresh') . After that, using the pageLoading (true) function, the loading indicator is hidden. And we see (in this case, not quite) a neat list.
That's all, we dynamically loaded and displayed data using jQuery Mobile

Conclusion

Full source code can be found on GitHub . A detailed description of jQuery Templates can be found on the jQuery website in the appropriate section . Questions can and should be asked, I will try to answer everything.