tohokuaikiのチラシの裏

技術的ネタとか。

ConfluenceにおけるJavaScriptテンプレートについて

soyを使ったClosureTemplateが導入される前、JavaScript純粋なテンプレートとしてAJS.template()メソッドがある。

参考ページ:Template | AUI Documentation

テンプレートの設定

テンプレートのHTMLは<script type="text/x-template">を使う。

<script type="text/x-template" title="template-title">
<div id="foo">
ここに適当なHTMLテンプレートを記述
テンプレート変数を使う場合はブレースで囲う
吾輩は{name}である。名前は{madanai}
</div>
</script> 

テンプレートの呼び出し

javascriptから呼び出すには
var template = AJS.template.load("template-title");

となる。template-titleは先ほどのx-templateで指定したtitle属性

変数を展開するにはfillメソッドを使う
var template = AJS.template.load("template-title");
template = template.fill({name: "猫", madanai: "まだない"});

なお、fillメソッドはHTMLエスケープを自動で行ってくれる。これをエスケープしてほしくない場合は、fillHTMLメソッドを使う。


このx-templateについては

bitbacketの例:テンプレートエンジンのススメ - テンプレートエンジンとは | CodeGrid
Underscore.js:HTML文書内にJavaScriptで使う「見えないデータ」を入れる - 檜山正幸のキマイラ飼育記
の2つで使ってるのが見つかった。まぁ、bitbacketはAtlassianだからConfluenceと同じといえば同じ。