javascript - Hur debuggar man Mustache js-mall?

Jag använder mustache.js för att rendera klient. Jag har definierat ett templateskript och skickar en modellobjekt (array). Ibland ser jag inte objektvärdena i användargränssnittet. Hur kan jag felsöka detta.

Jag itererar "modulerna" och skapar en tabellrad. Det finns vissa fall där GUI:t blir tomt men modellen faktiskt har data. I dessa fall vill jag debugga här. Hur debuggar man den här mallen.

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

Tack.

Svar #1

Mallen du tillhandahåller är ganska enkel, det finns inget uppenbart fel med den. Du säger också att den fungerar i vissa fall, vilket tyder på att själva mallen inte är problemet.

Från den information du tillhandahåller finns det inte mycket vi kan göra för att felsöka förutom att testa att mallen faktiskt fungerar med Mustache.js genom att rendera några dummydata som passar mallen:

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>

Detta fungerar bra, vilket säger oss att problemet ligger någon annanstans, möjligen att en del av data i den faktisk tillhandahållna modules-arrayen skiljer sig från vad mallen förväntar sig.

Så, för att felsöka vidare skulle jag titta på några av de faktiska uppgifterna från de fall som inte renderas som förväntat och testa dessa data i konsolen som i skriptet ovan.

Några möjliga gissningar om vad som kan utlösa fel (endast spekulation, behöver testas mot verkliga felande fall):

• Variabelnamnen har varierande användning av stora och små bokstäver, label är helt i gemener, Current börjar med stor bokstav. I Mustache.js spelar bokstavsstorlek roll, så om detta inte är konsekvent i de tillhandahållna uppgifterna kan det göra att variabler inte renderas.
• Mustache.js kanske inte renderar variabler med falsy-värden. Vad som anses vara truthy eller falsy är inte alltid klart, se Vad är truthy eller falsy i Mustache och Handlebars?