我一直在使用 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&ord=asc&op=list","ord":"asc","class":"","asc":true,"desc":false},{"label":"City code","id":"city_code","url":"staff.mics?sort=city_code&ord=asc&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"},`
....