如何调试小胡子js模板？

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

我正在迭代“模块”并创建一个表格行。有些情况下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>

谢谢。

来源

2016-08-18 JavaUser

我一直在使用吨的console.log，以确保值真的存在和准确。它不直接调试模板，但它有帮助。 – wazz

我从来没见过类占位符。这很酷。 – wazz

不是一个解决方案，但它偶尔会派上用场：https：//mustache.github.io/#demo –

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

从您提供的信息，没有太多我们能做的，除了调试，以测试该模板实际上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值的变量。什么被认为truthy或falsy并不总是很清楚，看到What is truthy or falsy in Mustache and Handlebars?

来源

2016-08-31 21:52:40

如何调试小胡子js模板？

回答

相关问题