クライアントサイドのテンプレートエンジン
JsTemplateを使って見たので、忘れないうちにメモ。
google製みたいです。
色々出来るみたいです。
1. SVNからチェックアウトする
【リポジトリ】
http://google-jstemplate.googlecode.com/svn/trunk
使うのは
util.js
jsevalcontext,js
jstemplate.js
2. 使ってみる
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jstemplateテスト</title>
<script src="./jstemplate/util.js" type="text/javascript"></script>
<script src="./jstemplate/jsevalcontext.js" type="text/javascript"></script>
<script src="./jstemplate/jstemplate.js" type="text/javascript"></script>
<script src="./original/myscript.js" type="text/javascript"></script>
</head>
<body>
<p><a href="javascript:setTemplateData('1')">listあり</a></p>
<p><a href="javascript:setTemplateData('2')">listなし</a></p>
<div id="output"></div>
<!-- テンプレートデータ -->
<div style="display:none">
<div id="template">
<span jscontent="title"></span>
<span jscontent="detail"></span>
<ul jsdisplay="list.length">
<li jsselect="list">
<label>
<input jsvalues=".name:$this.attrName; .checked:$this.attrChecked" type="checkbox" value="1"/>
<p jscontent="$this.listTitle"></p>
</label>
</li>
</ul>
</div>
</div>
</body>
</html>
id="template"のところがテンプレートデータ。
親divタグのstyleで"display:none"で非表示にしてある。
テンプレートの中の
jscontent -> jsonデータとバインドするパラメータを書いておくとバインドされる。(myscript.jsの中でやってる)
jsdisplay -> 非表示設定が出来るっぽい。今回の書き方だと変数が存在してるか？っていうチェック？？ jsdisplay="list.length == 0" っていう書き方も出来るとか出来ないとか。。。
jsselect -> 変数を指定すると要素をループして取り出す？foreach的な？
jsvalues -> 要素とかで変数に出来るっぽい。この例だとname属性とchecked属性にJSONのlistのattrNameとattrCheckedをバインドさせてる。ちなみに$thisはjsselectでループしているlist配列のターゲットデータ。
※ <button jsvalues=".hoge:$this.listTitle" onclick="hogeFunction(hoge);"/>
的な使い方も出来るよ、ってwikiには書いてあるようなないような。
./original/myscript.js
var myJson1 = {title:"タイトル_1_ですよ。",detail:"このデータはlistデータを持ってるのです。",list:[{listTitle:"1個目なのです",attrChecked:true,attrName:"name_1"},{listTitle:"2個目なのです",attrChecked:false,attrName:"name_2"}]};
var myJson2 = {title:"タイトル_2_ですよ。",detail:"このデータはlistデータを持ってないのです。"};
function setTemplateData(type) {
// テンプレートの取得
var t = jstGetTemplate('template');
// 表示スペース
var output = document.getElementById('output');
// 表示スペースの初期化
output.innerHTML = "";
// 表示スペースにテンプレートを設定
output.appendChild(t);
var myJson;
if (type=="1") {
myJson = myJson1;
} else {
myJson = myJson2;
}
// JSONデータとテンプレートをバインド
jstProcess(new JsEvalContext(myJson), t);
// デバッグ
console.log(output.innerHTML);
}
後で読み返したときに、この日本語理解出来ない可能性があるな。。。
英語も日本語もやばす。。。
なんとかせねば。。。
JsTemplateを使って見たので、忘れないうちにメモ。
google製みたいです。
色々出来るみたいです。
1. SVNからチェックアウトする
【リポジトリ】
http://google-jstemplate.googlecode.com/svn/trunk
使うのは
util.js
jsevalcontext,js
jstemplate.js
2. 使ってみる
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jstemplateテスト</title>
<script src="./jstemplate/util.js" type="text/javascript"></script>
<script src="./jstemplate/jsevalcontext.js" type="text/javascript"></script>
<script src="./jstemplate/jstemplate.js" type="text/javascript"></script>
<script src="./original/myscript.js" type="text/javascript"></script>
</head>
<body>
<p><a href="javascript:setTemplateData('1')">listあり</a></p>
<p><a href="javascript:setTemplateData('2')">listなし</a></p>
<div id="output"></div>
<!-- テンプレートデータ -->
<div style="display:none">
<div id="template">
<span jscontent="title"></span>
<span jscontent="detail"></span>
<ul jsdisplay="list.length">
<li jsselect="list">
<label>
<input jsvalues=".name:$this.attrName; .checked:$this.attrChecked" type="checkbox" value="1"/>
<p jscontent="$this.listTitle"></p>
</label>
</li>
</ul>
</div>
</div>
</body>
</html>
id="template"のところがテンプレートデータ。
親divタグのstyleで"display:none"で非表示にしてある。
テンプレートの中の
jscontent -> jsonデータとバインドするパラメータを書いておくとバインドされる。(myscript.jsの中でやってる)
jsdisplay -> 非表示設定が出来るっぽい。今回の書き方だと変数が存在してるか？っていうチェック？？ jsdisplay="list.length == 0" っていう書き方も出来るとか出来ないとか。。。
jsselect -> 変数を指定すると要素をループして取り出す？foreach的な？
jsvalues -> 要素とかで変数に出来るっぽい。この例だとname属性とchecked属性にJSONのlistのattrNameとattrCheckedをバインドさせてる。ちなみに$thisはjsselectでループしているlist配列のターゲットデータ。
※ <button jsvalues=".hoge:$this.listTitle" onclick="hogeFunction(hoge);"/>
的な使い方も出来るよ、ってwikiには書いてあるようなないような。
./original/myscript.js
var myJson1 = {title:"タイトル_1_ですよ。",detail:"このデータはlistデータを持ってるのです。",list:[{listTitle:"1個目なのです",attrChecked:true,attrName:"name_1"},{listTitle:"2個目なのです",attrChecked:false,attrName:"name_2"}]};
var myJson2 = {title:"タイトル_2_ですよ。",detail:"このデータはlistデータを持ってないのです。"};
function setTemplateData(type) {
// テンプレートの取得
var t = jstGetTemplate('template');
// 表示スペース
var output = document.getElementById('output');
// 表示スペースの初期化
output.innerHTML = "";
// 表示スペースにテンプレートを設定
output.appendChild(t);
var myJson;
if (type=="1") {
myJson = myJson1;
} else {
myJson = myJson2;
}
// JSONデータとテンプレートをバインド
jstProcess(new JsEvalContext(myJson), t);
// デバッグ
console.log(output.innerHTML);
}
後で読み返したときに、この日本語理解出来ない可能性があるな。。。
英語も日本語もやばす。。。
なんとかせねば。。。