如何调试Moustache js模板？

Question

我正在使用mustache.js来呈现客户端.我定义了tempalte脚本并传递模型对象(数组).有时,我没有在UI中看到对象值.如何调试这个.

我正在迭代"模块"并创建一个表行.在某些情况下,GUI变为空,但模型实际上有数据.在这种情况下,我想在这里调试.如何调试此模板.

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

谢谢.

Answer 1

您提供的模板非常简单，没有明显的错误。您还声明它适用于某些情况，这表明模板本身不是问题。

根据您提供的信息，除了Mustache.js通过渲染一些适合模板的虚拟数据来测试模板是否实际使用之外，我们无法进行调试：

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>

这工作正常，这告诉我们问题出在其他地方，可能是实际提供的modules数组中的某些数据与模板期望的不同。

因此，为了进一步调试，我将查看无法按预期呈现的案例中的一些实际数据，并像上面的脚本一样在控制台中测试这些数据。

关于什么可能触发失败的一些可能猜测（仅猜测，需要针对实际失败案例进行测试）：

• 变量名有不同的大小写，label都是小写，Current是 firstcaps。在Mustache.js, case 很重要，所以除非这在提供的数据中是一致的，否则可能会导致变量无法呈现。
• Mustache.js可能不会渲染带有falsy值的变量。什么被认为是真或假并不总是很清楚，请参阅Mustache 和 Handlebars 中的什么是真或假？