web-dev-qa-db-ja.com

moustache.jsで空のリストを処理する

Moustache.jsを使用して、テンプレートをJavaScriptでレンダリングしています。次の例の<h2>タグを非表示にするために、リストが空かどうかを確認したいと思います。これは可能ですか、それともmoustache.jsはロジックが不足していますか？

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

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

これはデータです：

{
  "persons":[
    {"name": "max"},
    {"name": "tom"}
  ]
}
javascriptlisttemplate-enginemustache
29
Max Schmidt

テンプレートをロジックレスに保つために、テンプレートをレンダリングする前にこのチェックを行うことができます。

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

テンプレートは次のようになります。

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

Persons.lengthを使用できます。真の値（つまり、0より大きい値）の場合、ブロックがレンダリングされます。

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

この問題で半日も苦労した後、ようやく簡単な解決策を見つけました！

リストをチェックせずに、最初のアイテムが空でないかどうかチェックしてください！

テンプレート：

{{#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"
36
Bouke Versteegh

代わりに handlebars を使用してください。それはMustacheのスーパーセットで、必要なパワーをもう少し与えます。口ひげコミュニティはこの機能を求めましたが、メンテナ それを入れることを拒否します 。

6
andrewrk

JavaScriptでは、{{#names.length}}{{/names.length}}または{{#names.0}}で確認できます

JavaScriptの外にいる場合（例：pystacheまたはScalate）、運が悪いです。唯一の解決策は、別のブール値を導入するか、オブジェクトに配列をネストすることです。maxbeattyが提案するように、空の配列がある場合は完全に回避します。

5
iwein