スポンサーリンク

ティラノで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

配列・連想配列

関連記事

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサーリンク