یکی از استفادههای بسیار پرکاربرد از jQuery، کار با دیتا و خوندن و نوشتن اون هست و معمولا این اطلاعات از درخواستهای AJAX مانند به دست میاد. در مورد این که چجوری میشه اطلاعات رو از طریق AJAX و jQuery گرفت، راه های زیادی وجود داره که به چند نمونه قبلا اشاره شده است.
این بار میخواهیم در مورد اینکه این اطلاعات رو چگونه شکل بدیم و در صفحه وب نشون بدیم، یه روش خیلی خوب و کارآمد رو یاد بگیریم و اون چیزی نیست جز استفاده از Template در جی کوئری. یعنی به جای استفاده از حلقه های تو در تو، یک قالب کلی میسازیم و دیتا رو به اون قالب میریزیم و یک لیستی از اطلاعات مورد نظر رو در صفحه وب نشون میدیم.
پلاگینی با عنوان jQuery Template وجود داره که با کمک اون خیلی ساده میشه از قابلیت طراحی یک قالب برای نشون دادن دیتا از اون استفاده کرد. هر چند این پلاگین در حالت بتا قرار داره و اعلام شده که دیگه روش کار نمیشه و ممکن هست در آینده از طرف تیم jQuery یک پلاگین کاملتر و سریعتر معرفی بشه، اما به هر حال این پلاگین خیلی خوب کار میکنه و خیلی از کارها رو راه با سادگی راه میندازه. پس اگر در یک پروژه نسبتا بزرگ با مشکلاتی از این پلاگین مواجه شدید، یا باید برای ورژن جایگزین صبر کنید یا توی سورس این پلاگین دست ببرید و مشکلتون رو حل کنید.
شروع کار
برای شروع کار باید پلاگین Template رو دانلود کنید و یا میتونید مستقیم از CDN مایکروسافت استفاده کنید. برای دانلود روی لینک رایت کلیک کنید و Save link as یا Save target as یا … بزنید.
برای استفاده در پروژه:
http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js
سورس:
http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js
و البته خود کتابخونه jQuery هم که فراموش نمیشه.
خواندن دیتا:
فرض میکنیم اطلاعات مورد نظر را از یک منبعی خواندهایم و در این مثال این اطلاعات رو به صورت static به یک متغیر پاس میدهیم.
استفاده از تمپلیت:
در این مثال به صورت خیلی ساده اطلاعات خوانده شده را با استفاده از تمپلیتی که ساختهایم، نمایش میدهیم:
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery Template</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js" ></script>
</head>
<body>
<input type="button" value="load" id="btn" />
<div id="result"></div>
<script id="template1" type="text/x-jquery-tmpl">
<ul>
<li><strong>${Name}</strong>
<br/>
${Job}
</li>
</ul>
</script>
<script type="text/javascript">
//در مثال واقعی، این مقدار توسط درخواست ایجکس برگردانده میشود
var mydata = [
{ Name: "Farshad", Job: "Designer" },
{ Name: "Amir", Job: "Marketing" },
{ Name: "Ali", Job: "Developer" }
];
$(function(){
$("#btn").live("click",function() {
$("#template1").tmpl(mydata).appendTo("#result");
});
})
</script>
</body>
</html>
با کلیک کردن بر روی دکمه، اطلاعات ما که 3 مقدار 2 تایی هست، توسط tmpl به داخل Template که در یک بلاگ <script> با ID مشخص نوشته شده است، ریخته میشود و توسط appendTo به بخشی از html که مورد دلخواه هست، اضافه میشود.
در داخل تمپلیت دقت کنید که دیتا به چه صورت صدا زده شده و باقی موارد هم که html میباشد. نتیجه کار به صورت زیر هست:
به همین سادگی میشه به اطلاعات خام، شکل و فرمت داد و کد تمیزتری رو هم داشت. به این ترتیب از توابعی مثل each هم نیازی نیست استفاده بشه.
چند نکته:
یک:
اگر اطلاعاتی که میخواهید نمایش داده شود، حاوی کدهای اچ تی ام ال بود، باید از {{html}} استفاده کنید تا اطلاعات به صورت encode نشده نمایش داده شود.
<script id="template1" type="text/x-jquery-tmpl">
<ul>
<li><strong>${Name}</strong>
<br/>
${{html Description}}
</li>
</ul>
</script>
<script type="text/javascript">
//در مثال واقعی، این مقدار توسط درخواست ایجکس برگردانده میشود
var mydata = [
{ Name: "Farshad", Description: "<em>Designer</em><br />..." },
{ Name: "Amir", Description: "<img src='...' />" }
];
// ادامه مثل قبل
دو:
اگر اطلاعات شما دارای چند مقدار برای یک گروه بود، باید از {{each}} استفاده کنید.
<script id="template1" type="text/x-jquery-tmpl">
<ul>
<li><strong>${Name}</strong>
<br/>
{{each Job}}
${$value.Title} <br/>
{{/each}}
</li>
</ul>
</script>
<script type="text/javascript">
var mydata = [
{ Name: "Farshad",
Job: [{ Title: "Designer"},{ Title: "Graphist"}]
},
{ Name: "Amir",
Job: [{Title: "Marketing"},{Title: "Sales"}]
}
];
// ادامه مثل قبل
نتیجه:
سه:
شما میتوانید از عبارتهای شرطی و همچنین Template های تو در تو هم استفاده کنید.
پی نوشت:
این مطلب به پیشنهاد یکی از خوانندگان وبلاگ جعبه ابزار نوشته شد. شما هم اگر در مورد مطلب به خصوصی که کمتر به زبان فارسی به اون پرداخته شده، دوست دارید بیشتر بدونید، مطرح کنید. 
این مطلب به صورت اختصاصی برای
وبلاگ جعبه ابزار نوشته شده است. استفاده از این مطلب به شرط ذکر منبع، آزاد میباشد.