计算页面加载的计数器

Question

我正在尝试构建一个简单的计数器，它将在页面上从 0 计数到 100 load.Here 是我提出的一些但不起作用。感谢所有帮助，谢谢

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);
    }
});

Answer 1

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

// 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。

Answer 2

事实上，您的 counterUp 方法已被声明和定义，但从未被调用。您必须在适当的钩子中调用它。在 http://emberjs.jsbin.com/wuxesosadi/1/edit?html,css,js,output 中，您会找到一个示例，每当您点击该数字时，它都会计算在内。

您要计数 "on page load" - 重新启动应用程序的整页加载将始终重置计数器。如果你的意思是过渡到路线，http://emberjs.jsbin.com/wuxesosadi/4/edit?html,css,js,output 将是一个有效的例子。

也就是说，对于现实世界中的问题，您可能会有柜台服务或模型中的数据。控制器应该只保存表示逻辑。即使控制器保存在内存中并重新使用（作为单例），这感觉也很不对。再一次，作为事情如何运作的一个例子，这是完全有效的。

Answer 3

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

分量

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 代码

奖励回合：full js-bin example

计算页面加载的计数器

counter that counts on page loads

ember.js