4

Ember.jsとHandlebar.jsと一緒にテーブルを作成しようとしています。残念ながら、valueBindingを使用してEmber.TextAreaで構成されるセルを作成する方法に行き詰まりました。

アイデアは次のとおりです。多くのエントリ（1対nの関係）を持つドメインモデルプロジェクトがあります。両方のドメインモデルは異なるオブジェクトであり、埋め込まれていません（エントリはプロジェクトに埋め込まれていません）。

すべてのプロジェクトには、いくつかの文字列（たとえば、「a」、「b」、「c」、...）を含むkeysと呼ばれる配列があります。さらに、すべてのエントリには要素の配列が含まれています。この各要素には、プロパティキーとして上記のキーの1つもあります。以下の詳細モデルを参照してください。

モデル

計画

{ keys: ['a', 'b', 'c'] }

エントリー

{
  parameters: [
    {
      key: 'a',
      value: 'aaaa'
    },
    {
      key: 'b',
      value: null
    },   
    {
      key: 'c',
      value: '123'
    }
  ]
}

ターゲットは、プロジェクトの各キーの列を含むHTMLテーブルを最終的に持つことです（上記の場合、ヘッダー'a'、'b'、'c'を持つ3つの列があります）。プロジェクトに関連付けられている（つまり、バックグラウンドでArrayControllerにロードされている）すべてのエントリには、行が必要です。そして、ここで注意が必要な部分があります。各セルは、「parameters」配列の適切な要素にバインドする必要があります（セルのコンテンツはEmber.TextAreaである必要があります）。

|| a                                                             || b  || c ||
-----------------------------------------------------------------------------
| entry 1 binding to element of parameters array where key = 'a' | ... | ... |
----------------------------------------------------------------------------
| entry 2 binding to element of parameters array where key = 'a' | ... | ... |
-----------------------------------------------------------------------------

アプローチI

テーブルヘッダーの作成は明らかに非常に簡単で、もちろん問題なく機能します。

<table>
   <thead>
     <tr>
       {{#each key in project.keys}}
         <th>{{key}}</th>
       {{/each}}
     </tr>
   </thead>

   <tbody>
     ...
   <tbody>
</table>

コードの作り方がわからない部分は本体です。配列コントローラーのエントリを反復処理することは可能ですが、適切な要素にバインドする方法-私には手がかりがありません。トリッキーなことは、バインディングが正しい要素に確立されていることです。たとえば、キー'a'の列では、バインディングは、element.key==='a'であるパラメータ配列の要素に対して行う必要があります。

<tbody>
  {{#each entry in App.entriesController}}
    <tr>
      {{#each key in project.keys}}
        ???
      {{/each}}
    </tr>
  {{/each}}
</tbody>

ハンドルバーヘルパーを使用することを考えましたが、Ember.jsはオブジェクト自体を渡さず（handlebar.jsのドキュメントとは異なります）、値を取得するために使用できるプロパティの名前のみを渡すことがわかりました。 。残念ながら、配列の場合、各ループで現在処理されている配列のエントリを取得する方法がわかりません。

アイデアは、エントリとキーをヘルパーに渡すことでした。これにより、entry.parameters配列の正しい要素にバインドされたEmber.TextAreaのインスタンスが返されます。

注：project.keysを反復処理することにより、キーの順序がヘッダーと同じであることを保証できます（同じ反復順序）。

この問題に取り組む方法の他のアイデアはありますか？

4

2 に答える 2

4

ここでの最善の解決策は、カスタムハンドルバーヘルパーを作成することです。残念ながら、現時点では、カスタムバウンドヘルパーを作成するのはそれほど簡単ではありません。ここに古いPRがあり、更新して1.0https://github.com/emberjs/ember.js/pull/615で動作させたいと考えています。あなたはこれからあなた自身の実装をするためにいくつかのアイデアを得ることができるかもしれません。

于 2012-09-17T03:45:19.750 に答える
1

クレイジーなバスタブのアイデア：Ember.Objectをプロキシとして使用して、線形化されたプロパティを動的に定義できます（Coffeescript for sanityでは、braindumpからの名前）：

    TheProxy = Ember.Object.extend
      fill: (projects, entries) ->
         for project in projects
           entry = # find entry for project
           for key,value of entry
             this.set "value_for_#{project.id}_#{key}", value

その後、{{value_for_xxx_yyyy}}バインディングを生成し、TheProxyの塗りつぶされたインスタンスをそれにバインドすることにより、同様の方法でテンプレートを生成できます。

于 2012-09-16T18:05:31.197 に答える