yusuke2255/jstemplate-sample.js

## jstemplate-sample.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 showTitle(title) {
    alert(title);
};

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.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="./jstemplate-sample.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>
              <button jsvalues=".hoge:$this.listTitle" onclick="showTitle(hoge);"/>
            </li>
        </ul>
      </div>
    </div>
  </body>
</html>
	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 showTitle(title) {
	alert(title);
	};

	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);
	}
	<!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="./jstemplate-sample.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>
	<button jsvalues=".hoge:$this.listTitle" onclick="showTitle(hoge);"/>
	</li>
	</ul>
	</div>
	</div>
	</body>
	</html>