0
이 문제에 대한 많은 질문을 읽었지만 여기에있는 문제는없는 것으로 보입니다.EmberJS 2.7에서 데이터를 구성 요소로 전달하는 중 오류가 발생했습니다.
이 문제를 제외하고는 잘 작동하는 제 3 자 구성 요소 (ember-highcharts)를 사용하고 있습니다.
대시 보드라는 경로가 있습니다. 지금이 경로는 단지 dummydata를 사용하고 있습니다. 상점을 사용하지 않고 있습니다. 이것은 문제를 설명하는 역할을합니다.
템플릿/dashboard.hbs
<div>
{{log model}} <-- NOTE this logs the object to the console as expected
{{summary-chart chartData=model}} <-- my component, see below
</div>
루트/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'}
]
}],
});
템플릿/구성 요소/요약 - chart.hbs
{{log model}} <-- NOTE this logs '**undefined**' to the console NOT expected
{{high-charts chartOptions=summaryOptions content=model}}
구성 요소/요약 차트. 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
}
}
}
});
모델이 정의되지 않고 요약 차트 구성 요소로 전달되지 않는 이유는 무엇입니까? 모델이 정의되지 않았기 때문에 차트가 렌더링되지만 (제목을 볼 수 있음) 물론 데이터가 플롯되지 않습니다.
나는이에 구성 요소를 변경하기 때문에 데이터가 구성 요소에 '지역'의 경우, 차트는 데이터 포인트와 함께 렌더링 :
템플릿/구성 요소/요약 - chart.hbs
{{high-charts chartOptions=summaryOptions content=summaryData}}
성분/요약-chart.js
'summaryData가'modelTestData '에 동일한 데이터 구조이므로, 차트를 플롯하는 방법을 이해하는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'}
]
}]
});
참고.
경로/컨트롤러 조합이 모델을 하위 구성 요소로 전달하지 않는 이유는 무엇입니까?