JsTemplateについてのメモ

クライアントサイドのテンプレートエンジン
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);
}

後で読み返したときに、この日本語理解出来ない可能性があるな。。。
英語も日本語もやばす。。。
なんとかせねば。。。