0

ハンドルバーの魅力的なエンジンを使用したノード プロジェクトに取り組んでいます。テーブルで表す必要がある非常に大きなオブジェクトがあります。ユーザーは、表示する列を選択できます。

ユーザーが選択した列を保持する列と呼ばれる変数があります。

columns = ['name','email']

そして、私は大きなオブジェクトの配列を持っています

items = [{
    name:'foo',
    email:'foo@foo.com',
    otherPropN:'other...'
}, ...]

これは、列名と電子メールのみを含むテーブルをレンダリングする最初の試みでした。

      <table class="table">
                <thead>
                    {{#each columns}}
                        <th>{{this}}</th>
                    {{/each}}
                </thead>
                <tbody>
                    {{#each items}}
                        {{#each ../columns}}
                            <td>{{*WHAT TO PUT HERE!*}}</td>
                        {{/each}}
                    {{/each}}
                </tbody>

            </table>

アイテムの範囲に戻る必要があるので、次のように言えます。item[column]しかし、その方法がわかりません。

EJSでは、これが私がすることです。

<table class="table">
                <thead>
                    <% columns.forEach(function(column){ %>
                        <th><%=column%></th>
                    <% }); %>
                </thead>
                <tbody>
                                  <% item.forEach(function(item){ 
                         columns.forEach(function(column){ %>
                        <td><%=item[column]%></td>

                        <% });
                                   }); %>
                </tbody>

            </table>

ありがとう!

4

2 に答える 2

2

次の 2 つの可能性がすぐに思い浮かびます。

  1. カスタム ヘルパーを使用してハンドルバーを変更します。
  2. Handlebars の考え方に合わせてデータを変更します。

最初のオプションは、次のような単純なヘルパーです。

Handlebars.registerHelper('property', function(o, k) {
    return o[k];
});

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

<td>{{property ../this this}}</td>

テンプレート内。デモ: http://jsfiddle.net/ambiguous/Dedt6/

2 番目のオプションは、テンプレートが何かを認識する前に JavaScript でデータ ラングリングを行うことです。

// Or the nested for-loop equivalent
var items_mangled = items.map(function(item) {
    return columns.map(function(column) {
        return item[column];
    });
});

次にitems_mangled、テンプレート関数を次のように処理しitems: items_mangledます。テンプレートは次のようになります。

{{#each items}}
    <tr>
        {{#each this}}
            <td>{{this}}</td>
        {{/each}}
    </tr>
{{/each}}

基本的に、JavaScript で配列とオブジェクトの配列を単一の配列の配列に変換して、Handlebars が最も好きなもの (配列) を操作できるようにします。Handlebars は、結局のところ、ほとんどのロジックがテンプレートの外部で実行されることを好みます。デモ: http://jsfiddle.net/ambiguous/vsBFS/

于 2013-10-10T01:14:29.100 に答える
0

さて、私は今それを得ると思います。全体のテーブルと「行」テンプレートの 2 つの個別のテンプレート オブジェクトを作成します。次に、各行テンプレートを適切なモデルに渡すたびにレンダリングする JavaScript ロジックを少し実行する必要があります。

于 2013-10-09T23:58:46.370 に答える