1

Handlebars.jsでは@index、テンプレートに渡すオブジェクトの別の並列配列に添字を付けるにはどうすればよいですか?

たとえば、次のように設定されたオブジェクトがあるとします。

var table = {
    cols : [
        { name: "Column 1" },
        { name: "Column 2" },
        { name: "Column 3", highlighted: true }
    ],
    rows : [
        {
            label: "Row 1",
            data: [
                { val: 5 },
                { val: 3 },
                { val: 8 }
            ]
        },
        {
            label: "Row 2",
            data: [
                { val: 8 },
                { val: 4 },
                { val: 0 }
            ]
        }
    ]
};

列内のセルにスタイルを適用するために列が強調表示されているかどうかを確認するために@indexfromループを使用できるようにする必要がありますが、 Handlebars.jsでは添字演算子での使用が許可されていないようです。{{#each rows}}{{#each data}}@index

例えば

{{@index}} <!-- Index of current rows.data is 2. -->

{{#if ../../cols.[@index].highlighted }}
    <!-- Never Executed -->
{{/if}}

{{#if ../../cols.[2].highlighted }}
    <!-- Executes -->
{{/if}}

これはサポートされていませんか? 私は何か間違ったことをしていますか？これを簡単に機能させるにはどうすればよいですか？

jsfiddle.net に例を投稿しました。

4

1 に答える 1

1

@key@index変数としてではなく、特別に動作します。なので、使える時でも123なのにmyvar.[123]使えません。 (少なくともHandlebars 1.3.0現在)myvar.[@key]@key

解決策は 2 つあります。1 つ目は、配列/オブジェクトの両方を取る独自のハンドルバー ヘルパーを作成することです。2 つ目は、データを再構築することです。つまり、2 つの並列配列をマージします。

後者のアプローチの例として、次の 2 つの配列がある場合:

var X={
  cat:"meow",
  sheep:"baaa"
  };
var Y={
  cat:3,
  sheep:5
  };

次に、次のことができます。

var Z={};
for(var ix in X){
  Z[ix]={X:X[ix],Y:Y[ix]};
  }

そしてZ、ハンドルバー テンプレートに渡します。

myTemplate({animals:Z});

これは次のようになります。

{{#each animals}}
  The {{@key}} goes {{this.X}}; we have {{this.Y}} of them.
{{/each}}
于 2014-01-17T13:27:49.973 に答える