jQuery Templating Plugin ကို အသုံးပြုခြင်း
မကြာသေးခင်က Microsoft ရဲ့ Templating Plugin ကို jQuery Team အနေနဲ့ တရားဝင် Support လုပ်လိုက်ပြီး ဖြစ်ပါတယ်။ အဲဒီလို တရားဝင် Support လုပ်လိုက်တဲ့အတွက် အရင်လို သီးသန့်စီ မဟုတ်တော့ပဲ jQuery Core Team မှာ update လုပ်တာတွေ ထိန်းသိမ်းတာတွေ အကုန် တိုက်ရိုက်လုပ်တော့မယ်လို့ အဓိပ္ပါယ်ရပါတယ်။ အဲဒီ Template Plugin ဟာ API တွေနဲ့ ချိတ်ဆက် အသုံးပြုတဲ့နေရာမှာ အင်မတန် အသုံးဝင်ပါတယ်။
အလွယ်ဆုံးနဲ့ စမှာဆိုတော့ Myanmar Tutorials ရဲ့ Tweets ကို လှမ်းခေါ်ကြည့်ရအောင်
Step 1 : လိုအပ်သည်များ ပြင်ဆင်ခြင်း
jQuery အတွက် Google CDN က ဖြစ်ဖြစ် ကိုယ့်စက်ထဲကို jQuery က Download ချလို့ပဲ ဖြစ်ဖြစ် သုံးနိုင်ပါတယ်။ jQuery ကို Download ချချင်တယ် ဆိုရင်တော့ www.jquery.com ကနေ Download ချနိုင်ပါတယ်။ Google CDN က သုံးမယ်ဆိုရင်တော့ Internet Connection ရှိဖို့ လိုမှာ ဖြစ်ပါတယ်။ ကျွန်တော်ကတော့ ကိုယ့်စက်ထဲမှာ စမ်းမှာ ဖြစ်တဲ့အတွက် Downlaod ချပြီး သုံးပါတယ်။
jQuery Template Plugin ကိုတော့ ဒီနေရာမှာ သွားပြီး Download ချနိုင်ပါတယ်။ ကျွန်တော်ကတော့ သီးသန့် ဖြစ်သွားအောင် js ဆိုတဲ့ Folder ထဲမှာ ထည့်ထားလိုက်ပါတယ်။
ဒီတော့ ထုံးစံအတိုင်း <head> tag ထဲမှာ ကြော်ငြာပေးရပါမယ်။
<script src="js/jquery-1.4.2.js"></script> <script src="js/jquery.tmpl.js"></script>
အဲဒီလို ကြော်ငြာပြီးရင် Template ကို ဖန်တီလို့ ရပါပြီ။
Step 2 : Template ဖန်တီးခြင်း
<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>
အထက်ပါ Script ကို ကြည့်မယ်ဆိုရင်
- Template အနေနဲ့ Script Tag အတွင်းမှာ ရေးရတယ်ဆိုတာ မှတ်သားထားဖို့ လိုပါမယ်။ အဲဒီအပြင် type အနေနဲ့ text/x-jquery-tmpl လို့ ကြော်ငြာပေးရပါမယ်။
- Template အတွင်းမှ Variables တွေကိုတော့ $ နဲ့ အစပြုပြီး ရေးပေးရပါမယ်။ property name ကိုတော့ { } အတွင်းမှာ ရေးပေးရပါမယ်။ Javascript တွေရဲ့ ထုံးစံအတိုင်း တစ်ခြားဘာမှ သတ်မှတ်ပေးစရာ မလိုပါဘူး။
- နောက်တစ်ခုကတော့ if statement ပါ။ {{if <condition> }} နဲ့ စပြီး {{/if}} နဲ့ ဆုံးပါတယ်။
Step 3 : Data များကောက်ယူခြင်း
ဒီအပိုင်းကတော့ Tweets တွေကို လှမ်းယူတဲ့အပိုင်း ဖြစ်ပါတယ်။
<script>
$.ajax({
type : 'GET',
dataType : 'jsonp',
url : 'http://search.twitter.com/search.json?q=mmtutorials',
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
};
});
}
});
</script>
Step 4: Markup နေရာအတွက် သတ်မှတ်ခြင်း
ရှေ့ဆက်ပြီး သတ်မှတ်ပေးရမယ့် အပိုင်းကတော့ ဘယ် Markup မှာ Tweets ကို အလုပ်လိုစေမှာလဲပေါ့။ ဒီနေရာမှာ Unordered List ကို သုံးပါမယ်။
<ul id="tweets"></ul>
Template မှ Data နှင့် HTML DOM ကို တွဲစပ် ရယူခြင်း
ဒါကတော့ နောက်ဆုံး အပိုင်းမါ Template ကို Data တွေ ပေါင်းစပ်ပေးတယ်၊ ပြီးရင် unordered list ဖြစ်တဲ့ #tweets နဲ့ တွဲစပ် ပေးလိုက်ပါတယ်။
$('#tweets').tmpl(twitter).appendTo('#twitter');
နောက်ဆုံး ရလာတဲ့ Source Code တွေကတော့ အောက်မှာ ပေးထားပါတယ်။
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tweets about Myanmar Tutorials</title>
<link rel="stylesheet" href="style.css" />
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery.tmpl.js"></script>
</head>
<body>
<h1> Tweets about MyanmarTutorials </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 : 'https://search.twitter.com/search.json?q=mmtutorials',
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>
CSS ဖိုင်ကတော့ ဒီမှာပါ
body {
width: 500px;
margin:auto;
font-family: helvetica, arial;
font-size: 12px;
background: #666;
}
li {
background: #e3e3e3;
border: 1px solid white;
overflow: hidden;
margin-bottom: 10px;
padding: 15px;
}
img {
float: left;
margin-right: 10px;
width: 60px;
}
h2 {
margin-top: 0;
}
h1 { color: white; }
ul { padding: 0;}
Source Code တစ်ခုလုံးကို Download ချချင်တယ်ဆိုရင်တော့
nettuts မှ Working with the Official jQuery Template Plugin စမ်းသပ်ရေးသားထားခြင်း ဖြစ်ကြောင်း ဝန်ခံပါသည်။
Facebook comments:
