使用handlebars.js來處理json template

使用json資料後的套版問題

我相信很多人在取得json資料後會用Jquery處理套版的問題:

1
2
3
4
5
6
7
8
9
10
$.ajax({
...
.done(function(data) {
var context = $("<ul></ul>");
$.each(data, function(i, v){
content.append('<li>' + v + '</li>');
...
});
});
});

數量上面少還好,如果是很複雜的template,這樣寫會變得超級難維護。這時候JS template系統就會發揮作用了。

選擇有很多種,有Mustache, Handlebars與Jquery Templating

這裡只介紹Handlebars,因為功能比Mustache多一些,語法又比Jquery Templating 精簡一些。在套入Rails時,更可以將templates獨立出來在一個目錄裡面,不然東西都寫在html裡真的亂糟糟又難管理。

  1. 安裝handlebars assets, 依照指示在Gemfile中,然後在欲載入之js中用require的方式載入,這邊使用 //= require handlebars.runtime
  2. 設定template目錄並且require到欲載入的js檔。依照說明檔在app/assets/javascripts中建立templates目錄,然後在templates中建立相對應的資料夾,通常以會用到的model或controller命名。
  3. handlebars用法參考官方網站
  4. 建立template檔案。注意需要以.hbs(代表handlebars)為檔案結尾。內容範例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{{#each feeds}}
<table width="100%" class="feed_container">
<tr>
<td>
<span class="handle fa fa-arrows-v"></span> #{{index}} {{from}} 於 {{created_at}} 分享
<a class="feed_remove" href="#"><i class="fa fa-trash-o"></i>移除</a>
</td>
</tr>
<tr>
<td><img src="{{image}}" ></td>
</tr>
<tr>
<td>
<a href="{{link}}" target="_blank">連結</a>
</td>
</tr>
<tr>
<td>
{{title}} - {{from_web}}
</td>
</tr>
<tr class="border_bottom">
<td>{{description}}</td>
</tr>
</table>
{{/each}}
  1. 由上列程式可以看到放在template檔中的資料是可以不用放在script tag的,真的很方便,而且可以獨立維護。
  2. 既然不使用script tag的方式,那麼指定與載入template的方法就變成gem說明的那樣: HandlebarsTemplates[‘contacts/new’];中括號裡面的是templates目錄的路徑與檔案。需要注意的是如果templates資料夾裡面沒有任何.hbs檔案,那麼HandlebarsTemplates便會無法建立。
  3. 參考以下範例,以ajax取得json的方式:
1
2
3
4
5
6
7
8
9
$.ajax("/get_json", {
type: "POST",
data: $("form:first").serialize(),
success: function(data) {
var renderer = HandlebarsTemplates['somemodel/new'];
var result = renderer(data);
$("#container").html(result);
}

這樣就不用把templates寫到js裡面了。