2

私はアセンブルを使用しています

たとえば、次のデータがある場合:

   {"people": [
        {
            "name": "Sally",
            "group": "A"
        },
        {
            "name": "John",
            "group": "B"
        },
        {
            "name": "Jane",
            "group": "B"
        },
        {
            "name": "Skippy",
            "group": "A"
        }
    ]}

プロパティ値 (A または B) に基づいて、名前の 2 つの個別のリストをレンダリングするにはどうすればよいですか?

目的の html 出力は次のとおりです。

<p>Group A</p>
<ul>
    <li>Sally</li>
    <li>Skippy</li>
</ul>

<p>Group B</p>
<ul>
    <li>John</li>
    <li>Jane</li>
</ul>

現在、ハンドルバーのテンプレート コードは次のようになっています。ただし、同じコードを何度もコピーすることは避けたいと思います。

<p>Group A</p>
{{#each index.people }}
    {{#is group "A"}}
        {{ name }}: {{ group }}
    {{ /is }}
{{ /each }}
4

2 に答える 2

2

現在使用しているソリューションは、まさに私が推奨したものです。

{{#each people}}
  {{#is group "A"}}
    ....
  {{/is}}
{{/each}}

ただし、ハンドルバー ヘルパーを簡単に作成して、必要なことを行うことができます。例えば

Handlebars.registerHelper('people', function (context, group) {
  return context.filter(function (item) {
    if (item.group) {
      return item.group === group;
    }
    return false;
  });
});

今、あなたのリストを考えると：

{
  "list": [
    {
      "name": "Sally",
      "group": "A"
    },
    {
      "name": "John",
      "group": "B"
    },
    {
      "name": "Jane",
      "group": "B"
    },
    {
      "name": "Skippy",
      "group": "A"
    }
  ]
}

次のようにヘルパーを使用します。

{{people list 'A'}}
{{people list 'B'}}

ヘルパーをアセンブルに登録する方法については、アセンブル ドキュメントに情報があります。

于 2014-04-28T00:47:31.880 に答える