ember.js - EmberJS，轮询，更新路由模型，重新渲染组件

Question

我一直在寻找更新路由模型的机制，并让组件(从与该路由关联的模板中调用)对该事件使用react，并重新呈现自己。

所以我有这样的索引模板(我传入了 IndexController 的模型，据我了解，这只是 IndexRoute 的代理——顺便说一下，我没有定义 IndexController):

<script type="text/x-handlebars" id="index">
  Below is the bar-chart component
  <br/>
  {{bar-chart model=model}}
</script>

我有这样的组件模板:

<script type="text/x-handlebars" data-template-name="components/bar-chart">
</script>

我的组件在一个单独的 JS 文件中实现，如下所示:

App.BarChartComponent = Ember.Component.extend({
  classNames: ['chart'],
  model: null,
  chart: BarChart(),
  didInsertElement: function() {
    Ember.run.once(this, 'update');
  },

  update: function() {
    var data = this.get('model').map(function(sales) {
      return sales.get('amount');
    });

    d3.select(this.$()[0]).selectAll('div.h-bar')
      .data(data)
      .call(this.get('chart'));
  }
}); 

BarChart() 函数只是返回一个函数对象，该函数对象执行 DOM 操作以使用 D3 生成图形。

我的 IndexRoute 定义如下:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('sales');
  }
});

在这个实验中，我使用了fixture:

App.Sales = DS.Model.extend({
  amount: DS.attr('number') 
});

idx = 1;

App.Sales.FIXTURES = [
  {id: idx++, amount: 2}, {id: idx++, amount: 6}, {id: idx++, amount: 12}, 
  {id: idx++, amount: 17}, {id: idx++, amount: 8}
];

我需要实现一种机制来定期轮询存储并更新 Route 的模型，并让 EmberJS 的魔法再次调用渲染函数(分配给 BarChart 组件中“chart”字段的值)。

这样做的正确方法是什么？我一直在尝试使用 setInterval 并调用 Route 的 refresh() 方法，但到目前为止还没有成功。

谢谢你的帮助!，
拉卡

补充(我在这里对格式进行了补充评论)。

我在 app.js 中添加了对 setInterval 的调用，如下所示:

setInterval(function () { 
  App.Sales.FIXTURES.shift();
  App.Sales.FIXTURES.push({
    id: idx++,
    amount: Math.round(Math.random() * 20)
  });

  App.IndexRoute.refresh();
}, 1500);

但我收到 JavaScript 错误，告诉我 App.IndexRoute 未定义。我打算在 Route 对象上调用“刷新”方法，因为我希望重新执行模型 Hook 。如何从我的 setInterval 函数中获取对 IndexRoute 实例的引用？

顺便说一句，这是触发刷新的正确/最佳方式吗？

(并且，按照下面 Oliver 的建议，我还在 Controller 中的“更新”函数中添加了观察(“模型”)。所以现在是这样的:

App.BarChartComponent = Ember.Component.extend({
  classNames: ['chart'],
  model: null,
  chart: BarChart(),
  didInsertElement: function() {
    ...
  },

  update: function() {
    ...
  }.observes('model')
}); 

补充2(回复 EmberJS, polling, update route's model, re-render component)

知道了!谢谢。

现在对于更新用例(后端中的元素数量保持不变，id 保持不变，只有“数量”随时间变化)。我将 setInterval block 修改为:

setInterval(function () { 
  App.Sales.FIXTURES.forEach(function(elem) {
    elem.amount = elem.amount + 5;
  });

  console.log('z');
}, 1500);

现在的问题是，BarChartComponent 中观察“model.@each”的“更新”方法永远不会被调用(好像我在夹具元素中所做的更改没有被 BarChartComponent 听到)。

我需要添加什么指令？

补充 3( EmberJS, polling, update route's model, re-render component 的详细信息):

我将 IndexController 的定义添加到我的代码中，只是为了确认我对 FIXTURE 中元素的更改至少被 Controller 听到(它是)。

所以，现在的问题是让组件也听到这种变化。如何？我应该从我的 Controller 调用一些“渲染”函数来要求组件重绘自己吗？

App.IndexController = Ember.ArrayController.extend({
  totalAmount: function() {
    console.log("iiii");
    var total = 0;
    this.forEach(function(sales) {
      console.log("a... " + sales.get('amount'));
      total += sales.get('amount');
    });
    return total;
  }.property('@each.amount')
});

Answer 1

App.IndexRoute实际上是一个类定义，而不是一个实例。

对于您的特殊情况，这里有一些重要的事情需要注意，find('type')返回 all过滤器会在您从商店添加/删除商品时自动更新。所以你可以直接调用find再次在代码中的任何位置(针对该类型)，它会自动更新您的集合。此外，您可能希望在路由级别控制更新，这样您就不会在不在范围内时继续更新。

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('sales');
  },
  setupController: function(controller, model){
    this._super(controller, model); // do the default implementation since I'm overriding this func
    this.startRefreshing();
  },
  startRefreshing: function(){
    this.set('refreshing', true);
    Em.run.later(this, this.refresh, 30000);
  },
  refresh: function(){
    if(!this.get('refreshing'))
      return;
    this.store.find('sales')
    Em.run.later(this, this.refresh, 30000);
  },
  actions:{
    willTransition: function(){
      this.set('refreshing', false);
    }
  }
});

示例: http://emberjs.jsbin.com/OxIDiVU/825/edit

此外，对于您的组件，您需要查看数组，而不仅仅是模型本身(因为模型引用不会更新，这意味着不会调用 observes 方法)。你会做这样的事情

watchingForModelChange: function(){

}.observes('model.[]')