Question

我正在尝试构建一个简单的计数器，在页面加载时将从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);
    }
});

Answer 1

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

<强>组件

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

Answer 2

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

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

事实上，您的counterUp方法已被声明和定义，但从未被调用过。你必须在适当的钩子中调用它。在http://emberjs.jsbin.com/wuxesosadi/1/edit?html,css,js,output中，您会发现一个例子，只要您点击该数字就可以计算。

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

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

计数页面加载的计数器

3 个答案: