mustache.jsの空のリストを扱う

Question

私はmustache.jsを使ってJavaScriptをテンプレートにレンダリングしています。次の例では、リストが空であるかどうかをチェックして、<h2>タグを非表示にしたいと考えています。これは可能なのですか、またはmustache.jsも論理的ではありませんか？

これはテンプレートです：

<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    {{name}} 
    {{/persons}} 
</ul> 

、これはデータです：

{ 
    "persons":[ 
    {"name": "max"}, 
    {"name": "tom"} 
    ] 
} 

Answer 1

テンプレートロジックレスを維持するには、テンプレートをレンダリングする前に、このチェックを行うことができます。半日のために奮闘した後

<h2>Persons:</h2> 
{{#hasPersons}} 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/hasPersons}} 

Answer 2

ではなくhandlebarsを使用してください。それはあなたに必要なパワーを少しだけ与えるMustacheのスーパーセットです。口ひげのコミュニティはこの機能を要求しましたが、メンテナーはrefuses to put it inです。

Answer 3

：

// assuming you get the JSON converted into an object 
var data = { 
    persons: [ 
     {name: "max"} 
     , {name: "tom"} 
    ] 
}; 
data.hasPersons = (data.persons.length > 0); 

次に、あなたのテンプレートは次のようになります。この問題で、私はついに簡単な解決策を見つけました！

リストを確認しないで、最初の項目が空でないかどうかを確認してください。

テンプレート：

{{#persons.0}} 
<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/persons.0}} 
{{^persons.0}}No persons{{/persons.0}} 

データ：

{ 
    "persons":[ 
    {"name": "max"}, 
    {"name": "tom"} 
    ] 
} 

出力：

<h2>Persons:</h2> 
<ul> 
    <li>max</li> 
    <li>tom</li> 
</ul> 

データ：

{ 
    "persons": [] 
} 

出力：

"No Persons" 

Answer 4

persons.lengthを使用できます。真理値（すなわち、0より大きい）であれば、ブロックがレンダリングされる。

あなたが（例えばpystacheまたはScalate中）のjavascriptの外にいる場合、あなたは運の出ている {{#names.length}}{{/names.length}}または {{#names.0}}

で確認することができますJavaScriptで

{{#persons.length}} 
<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/persons.length}} 

Answer 5

。唯一の解決策は、別のブール値を導入することです。または、配列にオブジェクトを入れ子にすることです。これは、maxbeattyのように配列が空の場合は避けてください。