我正在尝试构建一个绘制Highcharts图的组件,并努力让它运行一个函数来响应数据的变化。这是我到目前为止最接近的,虽然我不确定我是否正确地思考这个问题:
// Template using the component:
<script type="text/x-handlebars" data-template-name="index">
{{overview-chart data=model.dateRangeContributionSummary}}
</script>
// Component Template:
<script type="text/x-handlebars" data-template-name="components/overview-chart">
<div class='chart-wrapper clear'>
<div id='total-chart-inner' class='chart-inner'>
{{chart}}
</div>
</div>
</script>
// Component JS code:
app.OverviewChartComponent = Ember.Component.extend({
loadInitialChart: function() {
this.send('drawGraph');
}.on('didInsertElement'),
chart: function() {
if (Ember.$("total-chart-inner").exists()) {
this.send('drawGraph');
}
}.property('data.totalSeries', 'data.totalCategories'),
actions: {
drawGraph: function() {
// Code to draw Highcharts graph goes here...
}
}
});
我使用的是Ember v1.10.0,不确定这根本不会伤到我。理想情况下,我不需要loadInitialChart,但最初在将模板写入DOM之前调用图表函数。然后最大的问题是当我的数据发生变化时,图表不会被再次调用。关于我可能出错的一些提示,或者更好的方法?
答案 0 :(得分:1)
您需要使用观察者,而不是使用属性。
chart: function() {
if (Ember.$("total-chart-inner").exists()) {
this.send('drawGraph');
}
}.observes('data.totalSeries', 'data.totalCategories')
属性应该只能用于将属性传递给模板或控制器。
当你没有传回一个值时,你需要使用观察,但是你想要做一个操作