jQuery Templates API - Tech Head Brothers

La semaine dernière j’ai passé un peu de temps à jouer avec jQuery Templates API qui vient d’être annoncé sur le blog de jQuery. Vous pouvez lire les autres annonces Scott, JQuery Blog, James…

Cet article s’inspire de la publication suivante : « Enabling JSONP calls on ASP.NET MVC », le but étant de le modifier afin d’utiliser jQuery Templates API.

J’ai utilisé JetBrains WebStorm pour développer cet exemple mais vous pouvez bien entendu utiliser Visual Studio !

Pour commencer il faut inclure le plugin jQuery Template et jQuery lui-même

< head >

<title>flickr JQuery Template</title>

</ head >

Puis nous définissons un jQuery Template comme cela, à noter le type= « text/htm »

< script id="flickrTemplate" type="text/html">

<div>

<h2>${title}</h2>

<div>

<img src="http://farm5.static.flickr.com/${server}/${id}_${secret}_t.jpg"

title="${title}"

alt="${title}" />

</div>

</ script >

Il ne s’agit de rien d’autre que d’un bout de HTML avec des emplacements réservés aux templating. Par exemple {title} sera remplacé par la valeur de la propriété de l’objet qui sera connectée au template.

Nous définissons le html où le rendu de notre template sera inséré

< div id="interesting_photos"></div>

Enfin pour construire le HTML en utilisant le template et la collection retournée par Flickr in suffit d’appeler la méthode tmpl() après avoir sélectionné à l’aide de jQuery l’élément du DOM où sera inséré le HTML généré

//

// build the html

//

$("#flickrTemplate")

.tmpl(rsp.photos.photo)

.appendTo("#interesting_photos");

Voilà le code complet, n’oubliez pas d’y ajouter votre API Key Flickr pour que cela marche

<? xml version="1.0" encoding="UTF-8"?>

<! DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

< head >

<title>flickr JQuery Template</title>

</ head >

< body >

< script id="flickrTemplate" type="text/html">

<div>

<h2>${title}</h2>

<div>

<img src="http://farm5.static.flickr.com/${server}/${id}_${secret}_t.jpg"

title="${title}"

alt="${title}" />

</div>

</ script >

//

// Flickr REST url

//

var url = "http://api.flickr.com/services/rest/?";

//

// My Flickr API key

//

var api_key = "--your flickr api key here--";

// get interesting photos

//

function getInterestingPhotos() {

//

// build the URL

//

var call = url + "method=flickr.interestingness.getList&api_key="

+ api_key

+ "&per_page=5&page=1&format=json&jsoncallback=?";

//

// make the ajax call

//

$.getJSON(call, function (rsp) {

if (rsp.stat != "ok") {

//

// something went wrong!

//

$("#interesting_photos").append(

"<label style=\"color:red\">Whoops! It didn't work!" +

" This is embarrassing! Here's what Flickr had to " +

" say about this - " + rsp.message + "</label>");

}

else {

//

// build the html

//

$("#flickrTemplate")

.tmpl(rsp.photos.photo)

.appendTo("#interesting_photos");

}

});

}

</script>

$(function () {

$(getInterestingPhotos);

})

</script>

</ body >

</ html >