Ember.js 对页面加载计数的计数器

我正在尝试构建一个简单的计数器，在页面加载时可以从0计数到100。谢谢你的帮助，谢谢

App.AboutController = Ember.ObjectController.extend({
    count: 0,
    content: 0,
    counterUp: function() {
        var count = this.get('count') + 1;
        this.set('count', count);
        this.set('content', count % 100);
    }
});

---

您无法对控制器的属性进行计数，因为它将始终重新初始化，而您将始终为零。但是，您可以访问应用程序控制器，这样属性将不会重置：

// better use Controller because ObjectController is getting deprecated
App.AboutController = Ember.Controller.extend({
  needs: ['application'],
  count: Ember.computed.alias('controllers.application.count'),
  content: Ember.computed.alias('controllers.application.content'),
  counterUp: (function() {
    count = this.get('count') + 1 || 1;
    this.set('count', count);
    this.set('content', count % 100);
  }).on('init')
});

如果需要，可以初始化计数和内容属性，如下所示：

App.ApplicationController = Ember.Controller.extend({
  count: 0,
  content: 0
})

---

如果您使用过ObjectController的代理行为，则可以使用它替换Controller。

事实上，您的

counterUp

方法已经声明和定义，但从未调用过。你必须用合适的钩子来称呼它。在这里，你可以找到一个例子，当你点击数字时，这个例子是很重要的

您要计算“页面加载”-重新启动应用程序的完整页面加载将始终重置计数器。如果你的意思是过渡到路线，这将是一个有效的例子

---

也就是说，对于现实世界中的问题，您可能会有一个计数器服务或模型中的数据。控制器应该只保存表示逻辑。即使控制器保存在内存中并重新使用（作为一个单体），这感觉非常错误。同样，作为一个如何工作的例子，这是完全正确的。

这似乎是组件的一个很好的候选者：

{{timer-counter}}

组件

App.TimerCounterComponent = Ember.Component.extend({
  tick: function() {
    this.incrementProperty('count');
    if (Ember.isEqual(this.get('count'), 100)) {
      this.killCounter();
    } else {
      this.scheduleTick();
    }
  },
  scheduleTick: function() {
    this._counter = Ember.run.later(this, 'tick', 600);
  },
  setup: function() {
    this.set('count', 0);
    this.scheduleTick();
  }.on('didInsertElement'),

  killCounter: function() {
    Ember.run.cancel(this._counter);
  }.on('willDestroyElement')
});

组件模板

Count: {{count}}

然后在要使用组件的任何模板中：

{{timer-counter}}

编辑：稍微整理一下jsbin代码

App.TimerCounterComponent = Ember.Component.extend({
  tick: function() {
    this.incrementProperty('count');
    if (Ember.isEqual(this.get('count'), 100)) {
      this.killCounter();
    } else {
      this.scheduleTick();
    }
  },
  scheduleTick: function() {
    this._counter = Ember.run.later(this, 'tick', 600);
  },
  setup: function() {
    this.set('count', 0);
    this.scheduleTick();
  }.on('didInsertElement'),

  killCounter: function() {
    Ember.run.cancel(this._counter);
  }.on('willDestroyElement')
});

---

奖励回合：

如何运行计数器功能？如果它是来自模板的操作，则应将其放置在actions:object中，以便计数器应在页面加载后尽快启动。。。。计数器放在templateOk上，因为解决方案有不同的方向：您是想在每次“页面加载”时计算一个（x=x+1），还是计数器应该在页面加载时开始并自行运行（就像一个非常基本的时钟）？对于类似时钟的解决方案，您也可以使用感谢您的回答，只是为了向迟到的读者澄清：此解决方案适用于计算页面负载的计数器。关于时钟式计数器，请参见Kori John Roys的答案。