使用Ember 2加載關係數據

我在使用Ember 2.0加載關係數據時遇到了一些問題。鑑於以下兩個型號，項目和LineItem的，我想列出一個給定的項目中的所有行項目：使用Ember 2加載關係數據

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" 
        } 
       } 
      } 
     }

來源

2016-04-04 JB2

我測試了你的代碼，是的，它不工作。它只有在我將模型「item」和「items」重新命名的情況下才有效。它看起來對我來說，Ember Data不喜歡串接的型號名稱...... – Zoltan

謝謝Zoltan！你的意思是代替模型名稱'line-item'它應該被稱爲'items'？ – JB2

這就是它佐爾坦。謝謝 - 這解決了它！ – JB2

我測試了你的代碼，這是行不通的。它只有在我將模型「item」和「items」重新命名的情況下才有效。它看起來對我來說，Ember Data不喜歡串接的型號名稱......

因此，作爲結論，我們應該在任何地方使用簡單的名稱，或者必須找出確切的語法... camelCase，dash-已經過時或已經過低評分？

來源

2016-04-06 11:45:31 Zoltan

Ember似乎將'_'轉換爲'-'。所以，更新字段將自動導致字段名稱被轉換爲其等價的dasherized。這會導致各種混亂。關鍵是使用camelCase :) 再次感謝！ – JB2

我建議做如下：加載的項目在您的路線你現在就做。將項目實例傳入組件而不是注入存儲實例。

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

在你的組件模板，你可以檢查，如果異步加載的關係已經被加載並隨後顯示相應的部分：

// 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}} 
...

如果一切順利的話，這應該工作。您的組件不需要注入商店，也不需要project.line_items上的任何計算屬性。

來源

2016-04-05 08:09:38 Pavol

感謝Pavol。恐怕這就是我已經在做的事情（即將項目實例傳遞到組件:) - 除了它似乎不包含任何訂單項這一事實外，它按預期工作）。 – JB2

使用Ember 2加載關係數據

回答

相關問題