0

我已经阅读了很多关于这个问题的问题，但他们似乎都没有我在这里遇到的问题。

我正在使用第三方组件（ember-highcharts），除了这个障碍外，它工作得很好。

我有一条名为仪表板的路线。现在这条路线只是使用 dummydata，它没有使用商店。这有助于说明问题。

模板/仪表板.hbs

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

路线/仪表板.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'}
            ]
    }],

});

模板/组件/summary-chart.hbs

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

组件/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.hbs

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

组件/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”相同的数据结构，因此图表了解如何绘制它。

我不明白为什么路由/控制器组合没有将模型传递给子组件。

4

1 回答 1

1

为什么总是在 SO 上发帖后 2 分钟，您才意识到自己问题的答案？

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

模型被“传递”到子组件（摘要图表）的“chartData”属性，因此数据结构当然现在在这个级别绑定到“chartData”属性，不再绑定到模型属性仪表板/路线级别。

所以解决方案是在这里修复模板绑定：

模板/组件/summary-chart.hbs

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

chartData 现在被传递到“high-charts”子组件的“content”属性中，并且图表呈现，耶！

于 2016-08-30T02:28:30.793 回答