0

私はMustache.jsを使用していますが、パフォーマンス上の理由からHogan.jsを試してみたいと思っています。切り替えは簡単ですが、Mustache.jsで機能していたデータ形式はHogan.jsでは機能しないようです。

これは古い（動作中の）バージョンです：

var outputH = Mustache.render(this.options.templates.headers, headers);
this.$(".data-table thead").html(outputH);

var outputB = Mustache.render(this.options.templates.records, view);
this.$(".data-table tbody").html(outputB);

コードをこれに変更するとうまくいくと思いました：

var compiledHeaders = Hogan.compile(this.options.templates.headers);
var jsonHeaders = JSON.stringify(headers);
this.$(".data-table thead").html(compiledHeaders.render( jsonHeaders ));

var compiledView = Hogan.compile(this.options.templates.records);
var jsonRecords = JSON.stringify(view);
this.$(".data-table tbody").html(compiledView.render( jsonRecords ));

しかし、テーブルは正しくレンダリングされません。

これは大丈夫です、古いバージョン

大丈夫じゃない、新しいバージョン

これはヘッダーテンプレートです。

<script type=\"text/mustache\" id=\"template-list-headers\">
 <tr>
  {{#.}}
   <th>
    <a class=\"sortheader\" href=\"#{{id}}\">
     {{label}}
     {{#asc}}
      <img border=\"0\" alt=\"sort asc\" src=\"images/sort_asc.gif\">
     {{/asc}}
     {{#desc}}
      <img border=\"0\" alt=\"sort desc\" src=\"images/sort_desc.gif\">
      {{/desc}}
     </a>
    </th>
   {{/.}}
   <th class=\"pull-right\">action</th>
  </tr>
 </script>

これはデータテンプレートです：

  <script type=\"text/mustache\" id=\"template-list-records\">
  {{#.}}
   <tr>
    <td>{{airport_code}}</td>
    <td>{{city_code}}</td>
    <td class=\"pull-right\">
     [<a href=\"result.mics?m_uid={{airport_code}}\" class=\"listlink\">details</a>]
    </td>
   </tr>
  {{/.}}
  </script>

これはヘッダーデータです：

"[{"label":"Airport code","id":"airport_code","url":"staff.mics?sort=airport_code&amp;ord=asc&amp;op=list","ord":"asc","class":"","asc":true,"desc":false},{"label":"City code","id":"city_code","url":"staff.mics?sort=city_code&amp;ord=asc&amp;op=list","ord":"asc","class":"","asc":false,"desc":false}]"

これは記録データです：

"`[{"id":"1","airport_code":"AAA","city_code":"AAA"},{"id":"2","airport_code":"AAB","city_code":"AAB"},{"id":"3","airport_code":"AAC","city_code":"AAC"},{"id":"4","airport_code":"AAE","city_code":"AAE"},{"id":"5","airport_code":"AAF","city_code":"AAF"},{"id":"6","airport_code":"AAI","city_code":"AAI"},{"id":"7","airport_code":"AAJ","city_code":"AAJ"},{"id":"8","airport_code":"AAK","city_code":"AAK"},{"id":"9","airport_code":"AAL","city_code":"AAL"},{"id":"10","airport_code":"AAM","city_code":"AAM"},{"id":"11","airport_code":"AAN","city_code":"AAN"},{"id":"12","airport_code":"AAO","city_code":"AAO"},{"id":"13","airport_code":"AAP","city_code":"HOU"},{"id":"14","airport_code":"AAQ","city_code":"AAQ"},{"id":"15","airport_code":"AAR","city_code":"AAR"},{"id":"16","airport_code":"AAS","city_code":"AAS"},{"id":"17","airport_code":"AAT","city_code":"AAT"},{"id":"18","airport_code":"AAU","city_code":"AAU"},{"id":"19","airport_code":"AAV","city_code":"AAV"},{"id":"20","airport_code":"AAX","city_code":"AAX"},{"id":"21","airport_code":"AAY","city_code":"AAY"},{"id":"22","airport_code":"ABA","city_code":"ABA"},{"id":"23","airport_code":"ABD","city_code":"ABD"},{"id":"24","airport_code":"ABE","city_code":"ABE"},{"id":"25","airport_code":"ABF","city_code":"ABF"},{"id":"26","airport_code":"ABG","city_code":"ABG"},{"id":"27","airport_code":"ABH","city_code":"ABH"},{"id":"28","airport_code":"ABI","city_code":"ABI"},{"id":"29","airport_code":"ABJ","city_code":"ABJ"},{"id":"30","airport_code":"ABK","city_code":"ABK"},`

....
4

1 に答える 1

0

これを解決することができたので、小さな調整が必要だったようです。

テンプレートの場合：

Change {{#.}} to e.g. {{#items}} and {{/.}} to {{/items}}

レンダリングコードで、egItem要素を含むegStuff配列を追加します。

// render headers
var compiledHeaders = Hogan.compile(this.options.templates.headers);
var stuff = {}; 
stuff.items = headers;
this.$(".data-table thead").html(compiledHeaders.render(stuff));

// Render the table
var view = this.getRecords();
var otherStuff = {}; 
otherStuff.items = view;
var compiledView = Hogan.compile(this.options.templates.records);
this.$(".data-table tbody").html(compiledView.render(otherStuff));
于 2013-01-16T18:49:26.237 に答える