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