Question

我一直在使用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 ));

但是表格没有正确呈现。

This is ok, old version

Not ok, new version

这是标题模板：

<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"},`

....

Answer 1

管理解决这个问题，似乎需要进行一些小调整：

在模板中：

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

在渲染代码中添加例如例如，填充数组项目元素：

// 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));

我的Hogan.js模板数据有什么问题（从纯Mustache迁移）？

1 个答案: