如何调试Mustache js模板？

Question

我正在使用mustache.js来呈现client。 我定义了临时脚本并传递了模型对象（数组）。 有时，我没有在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 ，大小写很重要，因此，除非在提供的数据中保持一致，否则可能导致变量无法呈现。
• Mustache.js可能不会使用falsy值来呈现变量。 被认为是真实还是虚假的东西并不总是很清楚，请参阅《胡子和把手》中的什么是真实或虚假？