Как отлаживать шаблон Mustache js?

Question

Я использую mustache.js для визуализации клиента. Я определил скрипт tempalte и передал объект модели (массив). Иногда я не вижу значения объектов в пользовательском интерфейсе. Как отладить это.

Я повторяю «модули» и создаю строку таблицы. В некоторых случаях 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 значениями. То, что считается правдивым или фальшивым, не всегда понятно, см. What is truthy or falsy in Mustache and Handlebars?