What is wrong with my data for Hogan.js templates (migrating from pure Mustache)?

Question

I've been using Mustache.js and for performance reasons want to try Hogan.js. I've though the switch would be simple but it seems that the data format that worked for Mustache.js doesn't work for Hogan.js.

This is the old (working) version:

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

I thought changing the code to this would work:

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

But the table doesn't render properly.

This is ok, old version

Not ok, new version

This is the headers template:

<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>

This is the data template:

  <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>

This is headers data:

"[{"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}]"

This is records data:

"`[{"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

Managed to solve this, it seems a small tweak was needed:

In the templates:

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

In the rendering code add the e.g. Stuff array with the e.g. Item element:

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