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

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

• javascript
• handlebars.js
• mustache

• 1 i've been using tons of console.log to make sure values are really there and accurate. it doesn't debug the template directly but it's helped. – wazz Commented Aug 26, 2016 at 9:07
• 1 i've never seen class placeholders. that's pretty cool. – wazz Commented Aug 26, 2016 at 9:08
• Not a solution, but it occasionally es in handy: mustache.github.io/#demo – IronAces Commented Aug 26, 2016 at 10:22
• It's hard to tembug mustache templates. And starting now tembugging is a word. The best approach is the one above. Trying everything else means that you will probably end up checking your model before it's getting into the template, and that's your only chance i suppose. – Razvan Dumitru Commented Aug 26, 2016 at 11:15
• 1 "There are some cases where the GUI bees empty but the model is actually having data": Could you post some examples of data for the failing cases? I see no alternative to debug this without knowledge about the data that fails. – Tomas Langkaas Commented Aug 28, 2016 at 19:57

1 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./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?