Question

我在ember中有一条看起来像

的路线

//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
    });
  }
});

我的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

但这总是最终未定义。

Answer 1

一种方法是直接将它传递给像这样的组件道具：

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

查看以下twiddle演示的第一个用例。

另一种是将服务注入到具有所需数据的组件中。

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

请查看this twiddle，以更全面地向组件传递数据，以及this part指南，正如@locks在评论中所指出的那样。

您还可以查看有关将属性传递给组件的SO link。

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

1 个答案: