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

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

[markdown]

– jQuery 3.1.0
– jsrender 0.9.81

## jQuery で書いたサンプル

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

“`javascript
.done((data) => {
$(‘#comment’).empty();
$(‘#count’).text(data.count + ‘件’);
$.each(data.bookmarks, (index, value) => {
let c = value.comment;
let t = value.timestamp;
if (c !== ”) {
$(‘

‘).appendTo(‘#comment’);
}
});
})
“`

> * [jQuery Ajax $.getJSON | deadwood](https://www.d-wood.com/blog/2016/07/06_8261.html)

## JsRender を利用したサンプル

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

> * [JsRender/JsViews](http://www.jsviews.com/#jsrender)

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

“`javascript
.done((data) => {
$(‘#comment’).empty();
$(‘#count’).text(data.count + ‘件’);
$(‘#comment’).append($(‘#bm’).render(data));
})
“`

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

“`html

“`

こちらが分かりやすい。

> * [JavaScriptのテンプレートJsRenderとJsViewsの紹介 – Qiita](http://qiita.com/mima_ita/items/628bf36dd453cf85bf7d)
> * [徹底解説JsRender／JsViews連載一覧：CodeZine（コードジン）](https://codezine.jp/article/corner/496)

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

### Haml 内に書く場合の書式

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

“`javascript