How to debug Mustache js template?

Question

I am using mustache.js to render client . I defined tempalte script and passing model object(array). Sometimes , I am not seeing the object values in UI . How to debug this .

I am iterating the "modules" and creating a table row . There are some cases where the GUI becomes empty but the model is actually having data. In this cases , I want to debug here . How to debug this template.

<script id="SomeTemplate" type="x-tmpl-mustache">
   {{#modules}}
                    <tr>
                        <td class="test">{{Name}}</td>
                        <td class="test">{{label}}</td>
                        <td class="{{XClass}}">{{Voltage}}</td>
                        <td class="{{YClass}}">{{Current}}</td>
                        <td class="{{ZClass}}">{{power}}</td>
                    </tr>
   {{/modules}}
</script>

Thanks.

Answer 1

The template you provide is quite straightforward, there is nothing obviously wrong with it. You also state that it works for some cases, which indicates that the template itself is not the problem.

From the info you provide, there is not much we can do to debug except to test that the template actually works with Mustache.js by rendering some dummy data that fit the template:

var template = document.getElementById('SomeTemplate').innerHTML;

console.log(Mustache.render(template, {
  modules: [
    {
      'Name': 'someName',
      'label': 'someLabel',
      'XClass': 'someXClass',
      'Voltage': 'someVoltage',
      'YClass': 'someYClass',
      'Current': 'someCurrent',
      'ZClass': 'someZClass',
      'power': 'somePower'
    }
  ]
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.js"></script>
<script id="SomeTemplate" type="x-tmpl-mustache">
   {{#modules}}
                    <tr>
                        <td class="test">{{Name}}</td>
                        <td class="test">{{label}}</td>
                        <td class="{{XClass}}">{{Voltage}}</td>
                        <td class="{{YClass}}">{{Current}}</td>
                        <td class="{{ZClass}}">{{power}}</td>
                    </tr>
   {{/modules}}
</script>

This works fine, which tells us that the problem is elsewhere, possibly that some of the data in the actually provided modules array differ from what the template expects.

Thus, to debug further, I would look at some of the actual data from the cases that fail to render as expected and test those data in the console as in the script above.

Some possible guesses about what could trigger failure (only speculation, needs to be tested against actually failing cases):

• The variable names have varying capitalization, label is all lowercase, Current is firstcaps. In Mustache.js, case matters, so unless this is consistent in the provided data, it could cause variables not to render.
• Mustache.js may not render variables with falsy values. What is considered truthy or falsy is not always clear, see What is truthy or falsy in Mustache and Handlebars?