javascript - 如何调试 Mustache 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首字母大写。在 Mustache.js 中，大小写很重要，因此除非在提供的数据中保持一致，否则可能会导致变量无法呈现。
• Mustache.js 可能不会呈现具有 falsy 值的变量。什么被认为是真实的或虚假的并不总是很清楚，请参阅 What is truthy or falsy in Mustache and Handlebars?