EmberJS 2.7 将数据向下传递到组件失败

Question

我已经阅读了很多关于这个问题的问题，但是 none 似乎有我这里遇到的问题。

我正在使用 third-party 组件 (ember-highcharts)，除了这个问题外效果很好。

我有一条名为仪表板的路线。现在这条路线只是使用虚拟数据，它没有使用商店。这就说明了问题。

templates/dashboard.hbs

<div>
{{log model}} <-- NOTE this logs the object to the console as expected
{{summary-chart chartData=model}} <-- my component, see below
</div>

routes/dashboard.js

import Ember from 'ember';

export default Ember.Route.extend({
    // this is for testing, normally we get the data from the store
    model: function() {
        return this.get('modelTestData');
    },

    setupController: function(controller, models) {
        this._super(controller, models);
        controller.set('model', models);
    },

    modelTestData: [{
        name: 'gear',
        colorByPoint: true,
        data: [
            {y: 10, name: 'Test1'},
            {y: 12, name: 'Test2'},
            {y: 40, name: 'Test3'}
            ]
    }],

});

templates/components/summary-chart.hbs

{{log model}}  <-- NOTE this logs '**undefined**' to the console NOT expected
{{high-charts chartOptions=summaryOptions content=model}}

components/summary-chart.js

import Ember from 'ember';

export default Ember.Component.extend({

  summaryOptions: {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Total weight of gear in each category'
    },
    tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b> of {series.name}'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    }
  }

});

为什么模型未定义且未传递到 summary-chart 组件中？图表呈现（你可以看到标题）但当然没有绘制数据，因为模型未定义。

如果我将组件更改为这个，那么数据 'local' 到组件，然后图表将使用数据点呈现：

templates/components/summary-chart.hbs

{{high-charts chartOptions=summaryOptions content=summaryData}}

components/summary-chart.js

import Ember from 'ember';

export default Ember.Component.extend({

  summaryOptions: {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Total weight of gear in each category'
    },
    tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b> of {series.name}'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    }
  },

  summaryData: [{
    name: 'gear',
    colorByPoint: true,
    data: [
        {y: 10, name: 'Test1'},
        {y: 12, name: 'Test2'},
        {y: 40, name: 'Test3'}
        ]
  }]

});

请注意 'summaryData' 是与 'modelTestData' 相同的数据结构，因此图表了解如何绘制它。

我不明白的是为什么 route/controller 组合没有将模型传递给 child 组件。

Answer 1

为什么在 SO 上发帖后总是 2 分钟后你才知道自己问题的答案？

关键行是“{summary-chart chartData...”

模型正在'handed down'到子组件（摘要图表）的"chartData"属性，所以数据结构当然绑定到'chartData' 属性现在这个级别，不再给模型属性在dashboard/route级别。

所以解决方案是在此处修复模板绑定：

templates/components/summary-chart.hbs

{{log chartData}}  <-- NOTE this logs the object now as expected
{{high-charts chartOptions=summaryOptions content=chartData}}

chartData 现在被传递到 'high-charts' 子组件的 'content' 属性，图表呈现，耶！

EmberJS 2.7 将数据向下传递到组件失败

EmberJS 2.7 passing data down into a component is failing

highcharts

ember.js

ember-data

ember-controllers

ember-components