Question

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

Answer 1

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

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

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

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

响应组件中的数据更改

1 个答案: