Ember.js 如何在Ember 2.x中将模型数据传递给组件

我在余烬有一条路线看起来像

//fish.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return Ember.RSVP.hash({
      fishPrices: this.store.query('fish-price', {filter: {type: params.type}}),
      type: params.type
    });
  }
});

My

fish.hbs

使用

model.type

更改页面上的文本。但是，我需要将

model.fishPrices

交给一个组件，该组件将鱼的价格绘制为时间的函数：

//fish-price-plot.js
import Ember from 'ember';
/* global Plotly */

export default Ember.Component.extend({
  didInsertElement() {
    console.log(this.get('model'));
    Plotly.plot( 'fish-price-plot', [{
      // ...
      //Need to access model.fishPrices here
  }
});

如何访问此组件中的模型？我看到很多信息表明我应该能够做类似的事情

var fishPrices = this.get('model.fishPrices');
//do something with fishPrices

---

但这总是以未定义结束

一种方法是直接将其传递给组件道具，如下所示：

// route template in which you want to use your component & model
{{fishprice-plot model=model}}

看看下面的演示，这是第一个用例

另一种方法是使用所需的数据向组件中注入服务

// components/fishprice-plot.js
export default Ember.Component.extend({
  fishData: Ember.inject.service()
});

请看一看更全面地向组件传递数据的示例，以及@locks在注释中指出的指南

---

您还可以查看有关向组件传递属性的信息。

需要指出的是，您应该命名数据，而不是

model

。因此，请使用

fishPrices=model.fishPrices

而不是

model=model

。更清晰，然后在组件中访问

this.get（'fishPrices'）

。。。由于某些原因，它在我的代码中不起作用。我想问题可能在我这边。我想指出的是，同样。谢谢大家，我把它添加到回答中，我确实回答了这个问题