GoogleからJavascriptのテンプレートエンジンシステム、JsTemplate がリリースされていたので、少し試して見ました。
こんな感じのJavascriptでshowDataメソッドを実行すると、
data = [{artist:"Teenagefunclub", title:"BANDWAGONESQUE"},
{artist:"Haven", title:"All for a Reason"},
{artist:"Gisli", title:"How About That?"},
{artist:"Fizzgig", title:"Reset"}];
function showData() {
var input = new JsEvalContext(data);
var output = document.getElementById('t');
jstProcess(input, output);
}
こんなHtmlが、
<div id="t">
<ul jsselect="$this">
<li>
<span jscontent="artist"></span> / <span jscontent="title"></span>
</li>
</ul>
</div>
こんな風に出力されます。
<div jstcache="0">
<ul jsinstance="0" jstcache="1" jsselect="$this">
<li jstcache="0">
<span jstcache="2" jscontent="artist">Teenagefunclub</span> / <span jstcache="3" jscontent="title">BANDWAGONESQUE</span>
</li>
</ul><ul jsinstance="1" jstcache="1" jsselect="$this">
<li jstcache="0">
<span jstcache="2" jscontent="artist">Haven</span> / <span jstcache="3" jscontent="title">All for a Reason</span>
</li>
</ul><ul jsinstance="2" jstcache="1" jsselect="$this">
<li jstcache="0">
<span jstcache="2" jscontent="artist">Gisli</span> / <span jstcache="3" jscontent="title">How About That?</span>
</li>
</ul><ul jsinstance="*3" jstcache="1" jsselect="$this">
<li jstcache="0">
<span jstcache="2" jscontent="artist">Fizzgig</span> / <span jstcache="3" jscontent="title">Reset</span>
</li>
</ul>
</div>
なかなか面白いです。
ここで、簡単に試すことができます。
でも、dataにURL入れてリンクとかにしたくないですか？
data = [{artist:"Teenagefunclub", url:"http://xxx.net/123"},
{artist:"Haven", title:"http://xxx.net/456"}];
を
<ul> <li><a href="http://xxx.net/123">Teenagefunclub</a></li> <li><a href="http://xxx.net/456">Haven</a></li> </ul>
みたいな感じ。
でも、属性値に指定データの中身を入れる事はまだできないぽいです。
今後に期待です。
