[JavaScript] JSRender 初體驗

2012-10-05

 

之前,再用 TMPL 就覺得 ,這東西很酷..

因為解決了從 AJAJ 接回來的資料,我自己要在那邊組裝 HTML Code 在 render 出來

有夠麻煩..

之前我是用 TMPL 來解決這問題..

但是 黑大 有跟我說過TMPL已經結束開發了..Orz…

推薦我使用 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: 姓名: 許當麻 &nbsp 年齡:29</p>
<ul>
<li>朋友 1-1</li>
<li>朋友 1-2</li>
</ul>
<div>
<div>
<p>2: 姓名: 不二當 &nbsp 年齡: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}} &nbsp 年齡:{{>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/


線上範例:



當麻許的超技八 2014 | Donma Hsu Design.