jQuery Templates: ce şi cum


În martie a.c. jQuery anunţa un parteneriat special cu Microsoft, care promitea angajarea colosului MS prin dezvoltarea codului şi adoptarea lui în diverse proiecte. Au trecut vreo nouă luni şi iată că ieri a apărut anunţul: New Official jQuery Plugins Provide Templating, Data Linking and Globalization. Nu vă spune mare lucru? Mie unuia nu mi-a spus. Până când am dat de un tutorial apărut tot ieri pe NetTuts: Quick Tip: Working with the Official jQuery Templating Plugin. Nu vă lăsaţi pradă impulsului să ignoraţi articolul doar pentru că apare numele lui Justin Bieber 😉 .

Jeffrey Way face (din nou) o treabă excelentă în acest videotutorial, explicând extraordinar de clar cum se foloseşte acest concept nou (pentru mulţi) de template în JavaScript. Celor care încă nu au pornit clipul şi au nevoie de un impuls mă bag să explic puţin: ceea ce se vizează este separarea părţii HTML de cea JavaScript. Aceasta înseamnă că avem un sector 100% JavaScript (evident folosind intens jQuery) şi partea HTML este… tot în JavaScript (şi tot cu jQuery, cu pluginul jQuery Templates), dar separat. Care este câştigul? Separarea aceasta logică permite în primul rând reutilizarea uşoară a părţii pur JavaScript, iar în al doilea rând o eventuală rearanjare a HTML-ului nu va mai afecta partea stabilă JavaScript.

Partea de templating este în liniile de la 15 la 27. Astfel a rămas cod curat JavaScript de la 31 la 50. Urmăriţi screencastul pentru că e foarte interesant. Codul online, spre a-l vedea în acţiune, e aici. Pentru descărcare şi studiu luaţi-l de aici.

[HTML]<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.tmpl.js"></script>
</head>
<body>

<h1> Tweets about Nettuts+ </h1>

<script id="tweets" type="text/x-jquery-tmpl">
<li>
<img src="${imgSource}" alt="${userName}" />
<h2> ${username} </h2>
<p> ${tweet} </p>

{{if geo}}
<span>
${geo}
</span>
{{/if}}
</li>
</script>

<ul id="twitter"></ul>

<script>
$.ajax({
type : ‘GET’,
dataType : ‘jsonp’,
url : ‘http://search.twitter.com/search.json?q=nettuts’,

success : function(tweets) {
var twitter = $.map(tweets.results, function(obj, index) {
return {
username : obj.from_user,
tweet : obj.text,
imgSource : obj.profile_image_url,
geo : obj.geo
};
});

$(‘#tweets’).tmpl(twitter).appendTo(‘#twitter’);
}
});
</script>
</body>
</html>[/HTML]


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

1 comentariu

  1. Mihai spune:

    Aș fi foarte recunoscător dacă m-ați ajuta și mi-ați spune cum aș putea să limitez numărul de tweet-uri pe pagină?


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *