Mustache jsテンプレートをデバッグするには？

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

あなたが提供するテンプレートは非常に簡単ですが、明らかに間違ったことはありません。また、テンプレート自体が問題ではないことを示す場合もあります。

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>

：

あなたが提供する情報から

、我々はテンプレートに合わせて、いくつかのダミーデータをレンダリングすることにより、テンプレートが実際にMustache.jsで動作することをテストする以外にデバッグするために行うことができますあまりありません

実際に提供されているmodules配列内のデータの一部が、テンプレートが予期しているものと異なっている可能性があります。

したがって、さらにデバッグするために、想定したとおりにレンダリングできないケースの実際のデータの一部を見て、上のスクリプトのようにコンソールでそれらのデータをテストします。

故障を引き起こす可能性がどの程度のいくつかの可能な推測（唯一の投機、実際に失敗例に対してテストする必要があります）：

• 変数名は大文字と小文字を変えてきた、labelはCurrentがfirstcapsで、すべて小文字です。 Mustache.jsでは、大文字小文字が重要なので、指定されたデータ内で一貫していなければ、変数がレンダリングされない可能性があります。
• Mustache.jsは、変数をfalsy値でレンダリングしないことがあります。真実か偽であるとみなされるものは必ずしも明確ではありません。What is truthy or falsy in Mustache and Handlebars?