Last active
December 19, 2015 22:49
-
-
Save yusuke2255/6030088 to your computer and use it in GitHub Desktop.
jstemplate sample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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