Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jstemplate sample
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.