How to debug a Mustache js template?

Question

I am using mustache.js to render the client. I defined a tempalte script and passed the model object (array). Sometimes I don’t see the value of objects in the user interface. How to debug this.

I repeat the “modules” and create the table row. In some cases, the GUI becomes empty, but the model actually has data. In this case, 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 pretty simple, there is nothing wrong with it. You also indicate that it works in some cases, which indicates that the template itself is not a problem.

From the information you provide, we cannot do much for debugging, except to verify that the template works with Mustache.js , creating some dummy data that matches 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 great, which suggests that the problem is in a different place, it is possible that some of the data in the actually provided array of modules different from what the template expects.

Thus, for further debugging, I would look at some actual data from cases that cannot display as expected, and test this data in the console, as in the script above.

Some possible guesses about what might cause the crash (only speculation, you need to test against actually unsuccessful cases):

• Variable names have different capitalization, label - all lowercase letters, Current - the first strokes. In Mustache.js business matters, so if it is not consistent in the data provided, this can lead to variables not being displayed.
• Mustache.js may not display variables with falsy values. What is considered true or false is not always clear, see What is truth or falsehood in Mustache and Handles?