jQuery Templates -> JsRender/JsViews

javascriptのテンプレートとして、jQuery Templatesには重宝していましたが、更新をwatchしていなかったら、 プロジェクトが JsRender/JsViews に移行してました。

end0tknr.hateblo.jp

OLD

github.com

NEW

JsRender/JsViews

使用方法の詳細は、www.jsviews.com のdocumentの通りですが、以下のように書くだけで動作します。

<script id="msg_log_tmpl" type="text/x-jsrender">
  <tr class="msg_remote">
    <td style="text-align:right;">{{: user}} さんが<br>{{: time}} に追加</td>
    <td><div class="msg_body">【LOG LEVEL: {{: level}}】{{: msg}}</div></td>
    <td></td>
  </tr>
</script>

<script id="msg_memo_tmpl" type="text/x-jsrender">
  <tr class="msg_local">
    <td></td>
    <td><div class="msg_body">{{: msg}}</div></td>
    <td>{{: user}} さんが<br>{{: time}} に追加</td>
  </tr>
</script>

<script src="/static/js/jquery-1.12.1.min.js"></script>
<script src="/static/js/jsrender.min.js"></script>

post_add_load_memo: function( data ){
    
    var tmpl_log  = $.templates('#msg_log_tmpl');
    var tmpl_memo = $.templates('#msg_memo_tmpl');
    for (var i=0;  i<data.recent_logs.length; i++ ){
        var recent_log = data.recent_logs[i];

        var html_tr = '';
        if( recent_log['level'] == 'MEMO'){
            html_tr = tmpl_memo.render( recent_log );
        } else {
            html_tr = tmpl_log.render( recent_log );
        }

        $('#msg_list tbody').prepend(html_tr);
        
    }

    p_util.hide_loading();
},