CoffeeScriptで学ぶ Underscore.js 14（Template編）

CoffeeScriptで学ぶ、Underscore.js。このエントリーで14回目です。今回はTemplate編。Underscore.jsが最も普及したのも、このtemplateがあったからのように思えます。templateは、公式サイトでも気合の入った説明がされています。

---

template

_.template(templateString,[data],[settings])

templateは、JavaScriptテンプレートをコンパイルし、レンダリングします。JSONデータソースからHTMLの一部をレンダリングするのに使われています。Template関数では、変数を出力する場合は、<%= ... %>を使います。JavaScriptのコードを実行するには、<% ... %>を使います。HTMLエスケープしたい場合、<%- ... %>を使います。

_ = require 'underscore'

template = _.template "hello <%= name %>"
console.log template {name: 'miku'}

list = '''
<% _.each(people, function(name) { %>
<li><%= name %></li>
<% }); %> 
'''
template = _.template list, {people:['MIKU', 'RIN', 'LEN']}
console.log template

template = _.template '<b><%- value %></b>'
console.log template {value: '<script>'}

実行結果

$ coffee template.coffee 
hello miku

MIKU

RIN

LEN
 
<script>

templateSettings関数を使うと、テンプレートを書き換えることができます。テンプレートとしてメジャーなMustache.jsスタイルのテンプレートにするには以下のように指定します。

_ = require 'underscore'

_.templateSettings =
  interpolate : /\{\{(.+?)\}\}/g

template = _.template "Hello {{ name }}!"
console.log template {name : "Mustache"}

実行結果

$ coffee templateSettings.coffee 
Hello Mustache!

---

関連ページ

• CoffeeScriptで学ぶ Underscore.js 07（Array編）
• CoffeeScriptで学ぶ Underscore.js 06（Array編）
• CoffeeScriptで学ぶ Underscore.js 05（Collection編）
• CoffeeScriptで学ぶ Underscore.js 04（Collection編）
• CoffeeScriptで学ぶ Underscore.js 03 （Collection編）
• CoffeeScriptで学ぶ Underscore.js 02（Collection編）
• CoffeeScriptで学ぶ Underscore.js 01（Collection編）