當麻許的超技八: [JavaScript] JSRender 初體驗

之前，再用 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/

線上範例:

2012-10-05

[JavaScript] JSRender 初體驗