[Front-End General] Underscore.js のテンプレートエンジンを利用する

レイアウトとロジックを分離する。

[markdown]

– jQuery 3.1.0
– underscore.js 1.8.3

こちらとの比較。

> * [テンプレートエンジン JsRender を利用する | deadwood](https://www.d-wood.com/blog/2016/10/04_8470.html)

## Underscore.js を利用したサンプル

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

> * [Underscore.js](http://underscorejs.org/#template)

JavaScript では、テンプレートの `id` に対して `_.template` を利用する。

“`javascript
.done((data) => {
$(‘#comment’).empty();
$(‘#count’).text(data.count + ‘件’);
const compiled = _.template($(‘#bm’).text());
for (let bookmark of data.bookmarks) {
if (bookmark.comment) {
$(‘#comment’).append(compiled({
timestamp: bookmark.timestamp,
comment: bookmark.comment
}))
}
}
})
“`

HTML テンプレート側に表示系を `<%` を利用して書く。 `<%-` でエスケープして出力。 ERB と同じなので個人的には分かりやすい。 ```html
“`

if や for も利用できるが、view template に持っていくと `<% _.each()` などを書かなければいけないので、可読性や分業を考えると問題がありそう。 > * [Underscore.jsのtemplate触ったメモ ::ハブろぐ](https://havelog.ayumusato.com/develop/javascript/e490-underscore_js_template.html)
> * [lodash.js (underscore.js)でのtemplateの使い方 – Qiita](http://qiita.com/nabettu/items/c4c6670e67972b40bbd7)

view template にロジックを持ちたくないので、これでいいのかも知れない。

### script type 属性について

MIME Type に沿って指定するとのこと。

> * [script 要素 – HTML | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script)

標準化されている訳ではないので、`x-` で始める適当な名前を付ければ良い。

> * [Media Types](http://www.iana.org/assignments/media-types/media-types.xhtml#text)

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

## 補遺

> * [JavaScriptテンプレートエンジンまとめ – Qiita](http://qiita.com/HelloPeople/items/7db7c8f5e5ace3b40874)

Backbone.js では Underscore.js を利用する。

> * [ドットインストールで「Backbone.js 入門」 | deadwood](https://www.d-wood.com/blog/2016/06/23_8198.html)
[/markdown]