lundi 29 août 2016

EmberJS 2.7 passing data down into a component is failing

I have read many questions on this problem, but none of them seem to have the issue I have here.

I am using a third-party component (ember-highcharts) which works great except for this snag.

I have a route called dashboard. For now this route is just using dummydata, it is not using the store. This servers to illustrate the problem.

templates/dashboard.hbs

<div>
 <-- NOTE this logs the object to the console as expected
 <-- 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

  <-- NOTE this logs '**undefined**' to the console as expected


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

});

Why is the model undefined and not being passed into summary-chart component? The chart renders (you can see the title) but of course without the data being plotted, because the model is undefined.

If I change the component to this, so the data is 'local' to the component, then the chart is rendered with the data points:

templates/components/summary-chart.hbs



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'}
        ]
  }]

});

Note that 'summaryData' is an identical data structure to 'modelTestData', so the chart understands how to plot it.

What I do not understand is why the route/controller combination is NOT passing the model down to the child component.




Aucun commentaire:

Enregistrer un commentaire