Template Engine Mustache を使う

mustacheはテンプレートエンジン。
様々な言語で使えるように準備されている。
JavaScript,Python,PHP,Perl,Java…
私が普段利用する言語では一通り利用できる。

なので、一通り利用してみようと考えた。
しかし、実際に使ってみると、言語によっては準備が面倒だったりした。

ネットワークが自由に使える環境であれば、どの言語でも簡単にセットアップできるが、
ネットワークが限られている職場の環境では、モジュール一つコピーして利用するということはできなかった。
上記の一覧の中で、唯一できたのはJavaScript。

mustache.jsを使う

とりあえず、下記のサンプルコードを。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE>
<html>

<head>
<meta charset="utf-8">
<title>mustache test</title>
</head>

<body>
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
* Hello {{name}}!<br>
# 2 * 3 = {{calc}}<br>
{{#mapList}}
* {{firstName}} {{lastName}}<br>
{{/mapList}}
{{#simpleList}}
- {{.}}<br>
{{/simpleList}}
</script>

<script src="mustache.js"></script>
<script>
window.setTimeout(function() {
var template = document.getElementById('template').innerHTML;
var data = {
name: "Luke",
calc: function() {
return 2 * 3;
},
simpleList: [
"one","two","three"
],
mapList: [
{firstName: "fname", lastName: "lname"},
{firstName: "fname2", lastName: "lname2"}
]
};
var rendered = Mustache.render(template, data);
document.getElementById('target').innerHTML = rendered;
}, 1500);
</script>
</body>

</html>

テンプレートとデータを準備し、下記の処理でテンプレートを展開する。

1	var rendared = Mustache.render(template, date);

簡単に利用できた。

他の言語でも、環境さえ整えることができれば同じように使えるので、
覚えておいてもいいかもしれない。

同じタグの記事

同じカテゴリの記事

Template Engine Mustache を使う

mustache.jsを使う

コメントを残す