使用handlebars.js來處理json template

使用json資料後的套版問題

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

$.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)為檔案結尾。內容範例如下:

`\

{{#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的方式:

`\

  $.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裡面了。