Ember incementProperty间隔时间

时间:2014-03-21 22:34:28

标签: javascript ember.js

两部分问题:

第一部分

我有一个“秒”(在时间上)属性,我希望在同一元素上增加两个不同的事件:

  1. 点击增加
  2. 点击并按住(mousedown)以每1/10秒递增一次。
  3. 根据我的阅读,在同一元素上获取两个事件的最佳方法是创建一个组件并使用内置的事件处理程序。所以我已经这样做了,但是在我的mousedown事件中使用setInterval创建了一个范围问题,其中'this'成为窗口,incrementProperty无法再访问其模型。

    这是我的组件代码。点击事件非常有效(没有mousedown)。

    App.PaceAdjustUpComponent = Ember.Component.extend({
        click: function() {
            var ps = this.get('model.ps'),
                pm = this.get('model.pm');
            this.incrementProperty('ps');
            this.send('calculateTime');
            if (ps >= 59) {
                this.incrementProperty('pm');
                this.set('model.ps', 0);
            }
        },
        mouseDown: function() {
            var interval;
            var ps = this.get('model.ps'),
                pm = this.get('model.pm');
            interval = window.setInterval(function() {
                ps + 1;
                this.send('calculateTime');
                if (ps >= 59) {
                    this.incrementProperty('pm');
                    this.set('model.ps', 0);
                }
            }, 100);
        },
        mouseUp: function() {
            window.clearInterval(interval);
        }
        });
    

    第二部分:

            this.send('calculateTime');
    

    最初是控制器中某些代码的一部分,并且它工作正常,但我需要能够将该方法发送到控制器,这样当我的增量器工作时,它也会触发'calculateTime'。

    我是个菜鸟。完全绿色。需要大量的手持。感谢。

1 个答案:

答案 0 :(得分:1)

你基本上超出了范围。如果您想要从组件中发送操作,则需要在创建组件时将其连接起来并使用sendAction而不是sendsendAction将操作发送到连接创建组件时使用的操作名称)

{{pace-adjust-up model=model calculateTime='calculateFooooo'}}

App.PaceAdjustUpComponent = Ember.Component.extend({
  click: function() {
    this.increment();  
  },
  mouseDown: function() {
    var interval, self = this;
    interval = window.setInterval(function() {
      self.increment();
    }, 100);
    this.set('interval', interval);
  },
  mouseUp: function() {
    window.clearInterval(this.get('interval'));
  },
  increment: function(){
    var ps = this.get('model.ps'),
        pm = this.get('model.pm');
    this.incrementProperty('model.ps');
    this.sendAction('calculateTime');
    if (ps >= 59) {
      this.incrementProperty('model.pm');
      this.set('model.ps', 0);
    }
  }
});

http://emberjs.jsbin.com/qitohavu/1/edit