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); |
簡単に利用できた。
他の言語でも、環境さえ整えることができれば同じように使えるので、
覚えておいてもいいかもしれない。
同じタグの記事
同じカテゴリの記事