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一起使用之外，我们无法进行调试。

＆＃13;

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'
    }
  ]
}));

＆＃13;

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

＆＃13;

这很好用，它告诉我们问题出在其他地方，实际提供的modules数组中的某些数据可能与模板所期望的不同。

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

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

变量名称的大小写不同，label全部为小写，Current为firstcaps。在Mustache.js中，大小写很重要，因此除非在提供的数据中这是一致的，否则可能导致变量无法呈现。
Mustache.js可能无法使用falsy值呈现变量。什么被认为是真实或虚假并不总是清楚，请参阅What is truthy or falsy in Mustache and Handlebars?

如何调试Moustache js模板？

1 个答案: