,

[Front-End General] テンプレートエンジン JsRender を利用する

公開日: 2016/10/04
更新日: 2018/12/26

JsRender を利用して、レイアウトとロジックを分離する。
jQuery には依存しないので、単体で導入可能。

  • jQuery 3.1.0
  • jsrender 0.9.81

Contents

jQuery で書いたサンプル

JavaScript 内で HTML を組み立てて、append する。
量が多くなると HTML の修正や、そもそも HTML と JavaScript が分業であった場合などに問題が起こりがち。

    .done((data) => {
      $('#comment').empty();
      $('#count').text(data.count + '件');
      $.each(data.bookmarks, (index, value) => {
        let c = value.comment;
        let t = value.timestamp;
        if (c !== '') {
          $('<li>' + t + ': ' + c + '</li>').appendTo('#comment');
        }
      });
    })

JsRender を利用したサンプル

JsRender を利用して、レイアウトとロジックを分離する。

JavaScript では、テンプレートの id に対して .render(data) でレンダリングする。

    .done((data) => {
      $('#comment').empty();
      $('#count').text(data.count + '件');
      $('#comment').append($('#bm').render(data));
    })

HTML テンプレート側に表示系を {{ }} を利用して書く。
> でエスケープして出力。
if や for も View template 側で利用でき、可読性もあまり落ちない。

<script id="bm" type="text/x-jsrender">
  {{for bookmarks}}
    {{if comment}}
      <li>{{>timestamp}}: {{>comment}}</li>
    {{/if}}
  {{/for}}
</script>

こちらが分かりやすい。

See the Pen JsRender & Ajax $.getJSON by DriftwoodJP (@DriftwoodJP) on CodePen.

Haml 内に書く場合の書式

下記のように id と type を渡す必要がある。
:javascript filter でエラーがでたりで困った。

<script id="bm" type="text/x-jsrender">

発想を転換して :plain で書けば良かった。

javascript – Specify options for a filter in ruby HAML – Stack Overflow

%script#bm(type="text/x-jsrender")
  :plain
    {{for bookmarks}}
      {{if comment}}
        <li>{{>timestamp}}: {{>comment}}</li>
      {{/if}}
    {{/for}}

補遺