Ember 2を使用して関係データをロードする

Question

Ember 2.0を使用して関係データを読み込む際に問題があります。以下の二つのモデル、プロジェクトとのLineItemを考えると、私は特定のプロジェクトに属するすべての品目一覧表示しようとしています：私のルートインサイド

export default DS.Model.extend({ 
    name: DS.attr(), 
    organisation: DS.attr(), 
    customer: DS.attr(), 
    hours: DS.attr({defaultValue: 0}), 
    line_items: DS.hasMany('line-item', {async: true}) 
}); 

export default DS.Model.extend({ 
    name: DS.attr(), 
    value: DS.attr({defaultValue: 1}), 
    quantity: DS.attr({defaultValue: 1}), 
    state: DS.attr({defaultValue: 'OPEN'}), 
    project: DS.belongsTo('project') 
}); 

を、私は問題なく与えられたプロジェクトをロード：

export default Ember.Route.extend(AuthenticatedRouteMixin, { 
    model(params) { 
     return this.store.findRecord('project', params.project_id); 
    } 
}); 

私のコンポーネントの中で、私は次のように広告申込情報を読み込みます：

import Ember from 'ember';

export default Ember.Component.extend({ 
    store: Ember.inject.service(), 
    lineItems: function() { 
     return this.get('project').get('line_items').toArray(); 
    }.property('project.line_items'), 
}); 

私は私のテンプレート内部の私のラインアイテムを反復処理しようとするが、何も起こりません：

{{#each lineItems as |item|}} 
    <tr> 
    <td> 
     <a href="#">{{item.name}}</a> 
    </td> 
    </tr> 
{{/each}} 

ませ運をいずれか{{#each project.line_items as |item|}}を使用。 this.get('project').get('line_items').toArray()の出力を印刷すると、空のリストが表示されます。予想通り、私のプロジェクトは、ラインのアイテムが含まれていますが

：

{ 
    "data":{ 
     "type":"projects", 
     "id":"7d93633d-a264-4cb3-918c-82cc44cb76e2", 
     "attributes":{ 
     "created":"2016-04-04T19:02:03.113408Z", 
     "modified":"2016-04-04T19:02:03.113511Z", 
     "name":"Sample name", 
     "hours":0 
     }, 
     "relationships":{ 
     "line_items":{ 
      "meta":{ 
       "count":1 
      }, 
      "data":[ 
       { 
        "type":"LineItem", 
        "id":"01915d73-fde5-4b6f-8915-174c16592942" 
       } 
      ] 
     } 
     } 
    } 
} 

...私のラインアイテム：

 { 
      "type": "line-items", 
      "id": "01915d73-fde5-4b6f-8915-174c16592942", 
      "attributes": { 
       "created": "2016-04-04T19:02:15.622483Z", 
       "modified": "2016-04-04T19:02:15.622534Z", 
       "name": "Test Line Item", 
       "value": 1, 
       "quantity": 1 
      }, 
      "relationships": { 
       "project": { 
        "data": { 
         "type": "projects", 
         "id": "7d93633d-a264-4cb3-918c-82cc44cb76e2" 
        } 
       } 
      } 
     } 

Answer 1

私はあなたのコードをテストし、うまく動作しません。これは、モデル「アイテム」と「アイテム」をどこにでも名前を変更した場合にのみ機能します。 Ember Dataは連結モデル名が好きではないと考えています...

結論として、私たちはどこにでも簡単な名前を使用するか、正確な構文を理解する必要があります。camelCase、dash-怒ったり、アンダースコア？

Answer 2

私は次の操作を行うことをお勧め： としてあなたのルートでプロジェクトをロードしますあなたは今それをやる。 ストアインスタンスを注入するのではなく、プロジェクトインスタンスをコンポーネントに渡します。

// template which gets rendered by your component as the project instance is present 
{{#if project.line_items}} {{!-- #if project.lineItems --}} 
    {{!-- iterate over line items and print their names --}} 
    <ul> 
    {{#each project.line_items as |item|}} 
    <li>Line item name: {{item.name}}</li> 
    {{/each}} 
    </ul> 
{{/if}} 
... 

すべてがうまくいけば、これは動作するはずです：非同期的にロードされた関係がロードされ、その後適切なセクションを表示されているかどうかをチェックすることができ、あなたのコンポーネントテンプレートで

// template which gets rendered after model() hook 
... 
{{#if model}} 
    {{!-- pass the model into your component as 'project' --}} 
    {{your-component project=model}} 
{{/if}} 
... 

。コンポーネントには、注入するストアや、project.line_itemsの計算されたプロパティは必要ありません。