WebDesigning 2007年4月号掲載のサンプルです。サンプルスクリプトは掲載されたものとは若干異なります。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
var text = "今日の天気は#{weather}です。<br>最高気温は#{temp}です。<br>#{info}日和でしょう。";
var template = new Template(text);
$("header").innerHTML = template.evaluate({
weather : "くもり",
temp : "13℃",
info : "洗濯"
});
}
// --></script>
</head>
<body>
<h1>HTMLテンプレート処理</h1>
<h2>今日の天気情報</h2>
<div id="header"></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
var msec = (new Date()).getTime();
new Ajax.Request("keywords.txt", {
method: "get",
parameters: "cache="+msec,
onSuccess:function(httpObj){
var tmp;
var template = new Template($("header").innerHTML);
$("header").innerHTML = template.evaluate(eval("tmp="+httpObj.responseText));
}
});
}
// --></script>
</head>
<body>
<h1>HTMLテンプレート処理</h1>
<h2>今日の天気情報</h2>
<div id="header">
今日の天気は#{weather}です。<br>
最高気温は#{temp}です。<br>
#{info}日和でしょう。</div>
</body>
</html>
●keywords.txt
{
"weather" : "???∞",
"temp" : "21??",
"info" : "????"
}