如何调试 Mustache js 模板？

Question

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

我正在迭代 "modules" 并创建 table 行。在某些情况下，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?

如何调试 Mustache js 模板？

How to debug Mustache js template?

javascript

mustache

handlebars.js