[JavaScript] JSRender 初體驗
2012-10-05
之前,再用 TMPL 就覺得 ,這東西很酷..
因為解決了從 AJAJ 接回來的資料,我自己要在那邊組裝 HTML Code 在 render 出來
有夠麻煩..
之前我是用 TMPL 來解決這問題..
推薦我使用 JsRender..
最近就來看一下..
下面是超簡單範例..
讓你看一下就能夠學會 JsRender..
先介紹一下資料..
var data = [{ "Name": "許當麻", "Age": 29, "Friends": [{ "Name": "朋友 1-1", "Age": 18, "Friends": null }, { "Name": "朋友 1-2", "Age": 34, "Friends": null }] }, { "Name": "不二當", "Age": 27, "Friends": [{ "Name": "朋友 2-1", "Age": 19, "Friends": null }, { "Name": "朋友 2-2", "Age": 19, "Friends": null }] }];
這樣看有點複雜,我做一下簡單排版..
var data =
[{ "Name": "許當麻", "Age": 29,
"Friends": [
{ "Name": "朋友 1-1", "Age": 18, "Friends": null },
{ "Name": "朋友 1-2", "Age": 34, "Friends": null }] },
{ "Name": "不二當", "Age": 27,
"Friends": [
{ "Name": "朋友 2-1", "Age": 19, "Friends": null },
{ "Name": "朋友 2-2", "Age": 19, "Friends": null }] }];
簡單的說,資料有兩筆 一筆叫作許當麻,一筆叫做不二當
其中許當麻 有兩個朋友分別為 朋友 1-1, 朋友 1-2
不二當有兩個朋友 分別為 朋友 2-1, 朋友 2-2
我們利用這樣的資料來模擬巢狀資料結構..
首先我期待資料最後結果長這樣子..
<div>
<p>1: 姓名: 許當麻   年齡:29</p>
<ul>
<li>朋友 1-1</li>
<li>朋友 1-2</li>
</ul>
<div>
<div>
<p>2: 姓名: 不二當   年齡:27</p>
<ul>
<li>朋友 2-1</li>
<li>朋友 2-2</li>
</ul>
<div>
所以我會先建立兩個樣板…
<script id="UserTemplate" type="text/x-jsrender">
<div>
<p>{{:#index+1}}: 姓名:{{>Name}}   年齡:{{>Age}}</p>
<ul>
{{for Friends tmpl='#FriendTemplate'/}}
</ul>
<div>
</script>
第二樣板 是內部 顯示朋友 <li> 的部分
<script id="FriendTemplate" type="text/x-jsrender">
<li>{{>Name}}</li>
</script>
接下來就是把資料跟樣板 binding 起來..
<div id="div_Mother"></div>
<script type="text/javascript">
1:
2:
3: var data = [{ "Name": "許當麻", "Age": 29, "Friends": [{ "Name": "朋友 1-1", "Age": 18, "Friends": null }, { "Name": "朋友 1-2", "Age": 34, "Friends": null }] }, { "Name": "不二當", "Age": 27, "Friends": [{ "Name": "朋友 2-1", "Age": 19, "Friends": null }, { "Name": "朋友 2-2", "Age": 19, "Friends": null }] }];
4:
5: $("#div_Mother").html
6: (
7: $("#UserTemplate").render(data)
8: );
9:
</script>這樣簡單幾行,就可以把資料給組裝起來..
就不用在那邊組裝來組裝去..
其實他非常的博大精深..
可以從這邊找到更多的資料: http://borismoore.github.com/jsrender/demos/
線上範例:
標籤:
ASP.net
,
Javascript
-- Yesterday I wrote down the code. I bet I could be your hero. I am a mighty little programmer. 如果這篇文章有幫助到您,簡單留個言,或是幫我按個讚,讓我有寫下去的動力...