Question

我有兴趣回应Ember组件中的窗口调整大小事件，并认为我可以执行以下操作：

resizeListener: function() {
    var self = this;
    jQuery(window).on('resize', Ember.run.bind(self, self.trigger('resizeDidHappen')));
}.on('didInsertElement'),

我最初拥有首选this.$(window)而不是全局jQuery(window)，但我担心本地化选择器可能是问题的一部分。无论如何，在这两种情况下，每当我调整窗口大小时，我都会收到以下错误：

Uncaught TypeError: 
    undefined is not a function   vendor.js:13693 
    Backburner.run  vendor.js:13716 
    Backburner.join     vendor.js:34296 
    run.join    vendor.js:34349 
    run.bind    vendor.js:4759 
    jQuery.event.dispatch   vendor.js:4427 
    jQuery.event.add.elemData.handle

Answer 1

建议指定事件命名空间并在组件销毁时解除绑定。事件命名空间可以从this.get('elementId')唯一驱动。

App.ResizeAwareComponent = Ember.Component.extend({
  resizeEventName: function() {
    return 'resize.' + this.get('elementId');
  }.property('elementId')
  bindResizeEvent: function() {
    jQuery(window).on(this.get('resizeEventName'), Ember.run.bind(this, this.handleResize));
  }.on('didInsertElement'),
  unbindResizeEvent: function() {
    jQuery(window).off(this.get('resizeEventName'));
  }.on('willDestroyElement'),
  handleResize: function() {
    console.log("It works!");
  }
});

Answer 2

您的问题是您没有向Ember.run.bind提供功能。您的代码立即调用self.trigger('resizeDidHappen')，然后将返回值（可能为undefined）提供给Ember.run.bind。你需要给它一个函数，而不是调用函数的结果。

此外，您并非真正需要bind调用和 self变量，只需要其中一个。有几种方法可以重写您的特定代码，因此我会给您提供可读版本和简短版本。

可读版本：

resizeListener: function() {
    var self = this;
    jQuery(window).on('resize', function() {
        self.trigger('resizeDidHappen');
    });
}.on('didInsertElement')

简短版本：

resizeListener: function() {
    jQuery(window).on('resize', Ember.run.bind(this, this.trigger, ['resizeDidHappen']));
}.on('didInsertElement')

Answer 3

以下适用于我：

App.ResizeAwareComponent = Ember.Component.extend({ 
  resizeListener: function() {
    jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));
  }.on('didInsertElement'),

  handleResize: function(){
    console.log("It works!");
  }
});

工作示例here

我从文档（http://emberjs.com/api/classes/Ember.run.html#method_bind）

中挖掘出来

创建resizeDidHappen事件

3 个答案: