响应组件中的数据更改

时间:2015-08-28 17:05:46

标签: ember.js

我正在尝试构建一个绘制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之前调用图表函数。然后最大的问题是当我的数据发生变化时,图表不会被再次调用。关于我可能出错的一些提示,或者更好的方法?

1 个答案:

答案 0 :(得分:1)

您需要使用观察者,而不是使用属性。

chart: function() {
    if (Ember.$("total-chart-inner").exists()) {
      this.send('drawGraph');
    }
  }.observes('data.totalSeries', 'data.totalCategories')

属性应该只能用于将属性传递给模板或控制器。

当你没有传回一个值时,你需要使用观察,但是你想要做一个操作