ティラノでJsRender

ティラノのksファイルでJsRenderを使う。

いわゆる、こういうのには向いてる気がする。

配列とテンプレートの作り方

※メニューレイヤーに表示する場合。

例1：繰返し表示のみ

配列

[iscript]
f.data = [
　{id:01,name:"あかね",image:"fgimage/chara/akane/normal.png"},
　{id:02,name:"やまと",image:"fgimage/chara/yamato/normal.png"},
　{id:03,name:"ゆうこ",image:"fgimage/chara/yuko/normal.png"}
]
[endscript]

テンプレート

<a class="button_close">✖</a>                 //閉じるボタン（無いとゲーム止まる）
<ul id="result"></ul>                          //表示する領域（ID名は何でも）

//↓この部分を繰り返し表示
<script id="temptest" type="text/x-jsrender">　//テンプレ名=ID名
　<li">
　　<p>id : {{:id}}</p>
　　<p>name : {{:name}}</p>
　　<p><img src="{{:image}}"></p>
　</li>
</script>

例2：繰返し表示と、単独データ（？）がある場合

配列

[iscript]
f.data = {
　chara:[
　　{id:01,name:"あかね",image:"fgimage/chara/akane/normal.png"},
　　{id:02,name:"やまと",image:"fgimage/chara/yamato/normal.png"}
　],
　maxChara:2,
　toatalChara:0
}
[endscript]

テンプレート

<a class="button_close">✖</a>　　　　　　　　　 //閉じるボタン（無いとゲーム止まる）
<div id="result"></div>                        //表示する領域（ID名は何でも）

<script id="temptest" type="text/x-jsrender">　//テンプレ名=ID名
  <p>{{maxChara}}</p>
  <p>{{toatalChara}}</p>
　<ul>
　//↓{{for}}～{{/for}}を繰り返し表示
　{{for chara}}
　　<li">
　　　<p>id: {{:id}}</p>
　　　<p>name : {{:name}}</p>
　　　<p><img src="{{:image}}"></p>
　　</li>
 {{/for}}
　</ul>
</script>

テンプレート呼出しをマクロ化

[macro name="jsrender"]
[iscript]
  var data = mp.var;

  //レイヤー選択
  if(mp.layer=="free") var layer = this.kag.layer.getFreeLayer();
  else if(mp.layer=="menu") var layer = this.kag.layer.getMenuLayer();
  else var layer = this.kag.layer.getLayer(mp.layer, "fore");

　$.ajax({
　　url:"./data/others/"+mp.html,
　　type:"GET",
　　dataType: 'html',
　　success: function(tmp) {
　　　layer.html($(tmp));
　　　$("#"+mp.wrap).css("font-family", TYRANO.kag.config.userFace).css("z-index",999);
　　　$("#"+mp.wrap).html($("#"+mp.temp).render(data));   //テンプレート指定

    　//閉じるボタン	
    　$(".button_close").on({
     　 "click touchstart":function(e) {
      　  layer.hide();
       　 layer.empty();
      　}
　　　　//se入れる場合は、ここに"mouseenter"を追加
    　});
　　}
  });
  layer.show();
[endscript]
[endmacro]

[jsrender var=&f.data layer=0 html=test.html wrap="result" temp=temptest]

その他

• テンプレートは一つのhtmlに複数のテンプレートを記載しても問題ない。（※テンプレート名は変える）
• 閉じるボタンのイベントはもしかしたらテンプレ用htmlに書いてもいいのかも？
• ノベルゲームコレクション等、アップロードサイトではテンプレート取得は「GET」の方が良いと教えて頂いたので修正。（2018/9/30）

参考サイト

JsRender

• JsRender/JsViews（公式）
• JavaScriptテンプレートエンジン「JsRender」のすすめ |
  1 pixel｜サイバーエージェント公式クリエイターズブログ

配列・連想配列

• 変数関係(3ページ目) – ティラノスクリプト 製作テクニックwiki

関連記事