エンバーデータと、各オブジェクトは、オブジェクトを入れ子にしており、これらのオブジェクト内のオブジェクトのも、別のレベルがあるオブジェクトのリストを表示しようとしたとき、私は問題を持っているハンドルバー

Question

の各ループとネストされたオブジェクト。 API-RESPONS多くの貨物の受注があるところ私は、この（簡体字）JSONデータを提供します：

{ 
    "freightOrders": [{ 
     "id": 1, 
     "comment": "Freight order comment", 
     "shipments": [{ 
      "id": 1, 
      "shipment_lines": [{ 
       "id": 1, 
       "description": "A description", 
       "package_weight": 900, 
       "package_length": 1200, 
       "package_height": 400, 
       "package_width": 800 
      }], 
      "pickup_address": { 
       "id": 1, 
       "address": "The pickup address", 
       "zip": "9000" 
      }, 
      "delivery_address": { 
       "id": 2, 
       "address": "The delivery address", 
       "zip": "8000" 
      }, 
     }], 
    }] 
} 

私がしたいことは、すべての貨物の受注の一覧を表示することで、当面、アクセス直接最初の各注文の出荷ライン。ハンドルバーでは、私は編集

{{#each model as |order|}} 
    <span> 
     {{order.shipments.0.pickup_address.address}}, 
     {{order.shipments.0.pickup_address.zip}} 
    </span> 
{{/each}} 

と

{{#each model as |order|}} 
    {{#each order.shipments as |shipment|}} 
     <span> 
      {{shipment.pickup_address.address}}, 
      {{shipment.pickup_address.zip}} 
     </span> 
    {{/each}} 
{{/each}} 

を試してみました：要求されたとして、ここでは次のモデルである：

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    comment: DS.attr('string'), 
    shipments: DS.hasMany('shipment', { inverse: null }) 
}); 

と良い測定のための出荷モデル：

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    pickup_address: DS.belongsTo('address', { inverse: null }), 
    delivery_address: DS.belongsTo('address', { inverse: null }), 
    shipment_lines: DS.hasMany('shipment-line', { inverse: null }) 
}); 

何であれ、私がやろう、私はn個です注文オブジェクトの出荷要素またはネストされたオブジェクトにアクセスすることはできません。

私はまた、コンポーネントとして出荷パーツを作成し、コンポーネントに、ない勝つにorder.shipmentsを渡すためにしようとしたことを言及することができます。

SO検索とGoogleはハンドルバーとエンバーデータの各ループで

だから、燃えさし1.1に各入れ子に行う方法を、どのように1回のアクセス入れ子にできるオブジェクトの唯一のいくつかの例の任意のヒントを明らかにしないのですか？

Answer 1

私は十分な情報を得た場合、知っているのは、観測で始めることはできません。

JsonApi仕様はハイフンの代わりにアンダースコアの使用を記載しています。したがって、あなたのペイロードはshipment-lines（など）でなければなりません。 EmberはデフォルトでJsonApiを使用しているので、これに従うかシリアライザで修正する必要があります。例えば

：アンダースコアは、あなたのモデルに大文字で表記すべきであるという「理解」燃えさし

export default DS.JSONAPISerializer.extend({ 
    keyForAttribute: function(attr, method) { 
    return Ember.String.underscore(attr); 
    } 
}); 

注意。あなたのペイロードはこれを見て見て強化することができた[1]：

{ 
"freightOrders": [{ 
    "id": 1, 
    "comment": "Freight order comment", 
    "shipments": [{ 
     "id": 1, 
     "shipment-lines": [{ 
      "id": 1, 
      "description": "A description", 
      "package-weight": 900, 
      "package-length": 1200, 
      "package-height": 400, 
      "package-width": 800 
     }], 
     "pickup-address": { 
      "id": 1, 
      "address": "The pickup address", 
      "zip": "9000" 
     }, 
     "delivery-address": { 
      "id": 2, 
      "address": "The delivery address", 
      "zip": "8000" 
     }, 
    }], 
}] 
} 

そして、あなたの出荷モデル：

{{#each model.shipments as |shipment|}} 
    <span>{{shipment.pickupAddress.address}}</span> 
{{/each}} 

：あなたは、単純なループを行うことができるはず、あなたのテンプレートで

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    pickupAddress: DS.belongsTo('address', { inverse: null }), 
    deliveryAddress: DS.belongsTo('address', { inverse: null }), 
    shipmentLines: DS.hasMany('shipment-line', { inverse: null }) 
}); 

---

[1]ペイロードにattributesとrelationsを使用すると、JS ON APIに準拠しています（詳細はこちらをご覧ください）。http://jsonapi.org/