Laurent Kempé
jQuery Templates API
Jouons avec jQuery Templates API et Flickr
Par Laurent Kempé publié le 06/10/2010 à 21:30, lu 5934 fois,
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 ScottJQuery BlogJames
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>

    <script type="text/javascript" src="js/code.jquery.com%20jquery-1.4.2.js"/>

    <script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"/>

    <script type="text/javascript" src="js/jquery.tmpl.js"/>

</ 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>

    </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>

    <script type="text/javascript" src="js/code.jquery.com%20jquery-1.4.2.js"/>

    <script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"/>

    <script type="text/javascript" src="js/jquery.tmpl.js"/>

</ 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>

    </div>

</ script >

 

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

 

    <script type="text/javascript">

        //

        // 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&amp;api_key="

                       + api_key

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

 

            //

            // make the ajax call

            //

            $.getJSON(call, function (rsp) {

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

                    //

                    // something went wrong!

                    //

                    $("#interesting_photos").append(

                    "&lt;label style=\"color:red\"&gt;Whoops!  It didn't work!" +

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

                    " say about this - " + rsp.message + "&lt;/label&gt;");

                }

                else {

                    //

                    // build the html

                    //

                    $("#flickrTemplate")

                        .tmpl(rsp.photos.photo)

                        .appendTo("#interesting_photos");

                }

            });

        }

    </script>

 

    <script type="text/javascript">

        $(function () {

            $(getInterestingPhotos);

        })

    </script>

 

</ body >

</ html >

 
» Démarrer une discussion