Question

我有一个组件可以在任何地方点击窗口时切换。

为了实现这一点，我将组件方法作为全局事件绑定到body元素。

此外，我需要访问绑定到body元素的click事件调用的组件方法内的组件属性。

但它不起作用：

应用/组件/示例-component.js：

import Ember from 'ember';

export default Ember.Component.extend({

  exampleProperty: 'example value',

  didInsertElement() {
    console.log('start didInsertElement() ************************************************************');
    console.log('- "this" is the Ember.js component:');
    console.log(this.$());
    console.log('- "this.exampleProperty" has the Ember.js component value:');
    console.log(this.exampleProperty);
    Ember.$('body').click(this.exampleMethod).click();
    console.log('end didInsertElement() ************************************************************');
  },
  exampleMethod(event) {
    console.log('start exampleMethod() ************************************************************');
    console.log('- "this" is the DOM element that has triggered the event:');
    console.log(Ember.$(this));
    // console.log(this.$()); This doesn't work
    console.log('- "this.exampleProperty" is undefined:');
    console.log(this.exampleProperty);
    console.log('end exampleMethod() ************************************************************');
  },
});

如何让它发挥作用？

Answer 1

不确定它是否提供了您正在寻找的更清洁的方法，但.bind(this)可能有帮助。

// Using bind:
Ember.$('body').click(this, this.exampleMethod.bind(this)).click();

// Results in the below working as you desire:
this.$(); //returns jQuery.fn.init [div#ember256.ember-view, context: div#ember256.ember-view]

Ember.get(this, 'exampleProperty'); //returns 'example value'

Answer 2

每个组件都有click处理程序，只要单击组件，就会调用它。但是在您的情况下，您希望在单击body元素时触发组件方法，因此您的方法是可行的。但唯一缺失的部分是bind并清除事件。

import Ember from 'ember';

export default Ember.Component.extend({

  exampleProperty: 'example value',
  exampleMethodHandler: null,

   init() {
        this._super(...arguments);
        //bind function will return the function with scope changed to this.
        this._exampleMethodHandler = Ember.run.bind(this, this.exampleMethod);
    },

  didInsertElement() {    
        this._super(...arguments);
        Ember.$('body').on('click', this._exampleMethodHandler);
  },
   willDestroyElement() {
        this._super(...arguments);
        //Need to clear the registered event handler.
        if (this._exampleMethodHandler) {
            Ember.$('body').off('click', this._exampleMethodHandler);
        }
    },
  exampleMethod() {
    //Here this will refers to component,
    console.log('ComponentProperty access as usual ",this.get('exampleProperty'),event); 
  },
});

注意：我缓存了bind函数返回的函数引用，因为我们需要提供完全相同的引用来拆除。

所以

Ember.$('body').on('click',this.exampleMethod.bind(this))
Ember.$('body').off('click', this.exampleMethod);

以上内容不会拆除附加的事件处理程序，因为两个引用都不同。

Answer 3

我有一个有效的解决方案，但我觉得它不是很优雅。

必须将Ember.js组件作为事件数据传递给回调函数：

应用/组件/示例-component.js：

import Ember from 'ember'; export default Ember.Component.extend({ exampleProperty: 'example value', didInsertElement() { console.log('start didInsertElement() ************************************************************'); console.log('- "this" is the Ember.js component:'); console.log(this.$()); console.log('- "this.exampleProperty" has the Ember.js component value:'); console.log(this.exampleProperty); Ember.$('body').click(this, this.exampleMethod).click(); console.log('end didInsertElement() ************************************************************'); }, exampleMethod(event) { console.log('start exampleMethod() ************************************************************'); console.log('- "this" is the DOM element that has triggered the event:'); console.log(Ember.$(this)); // console.log(this.$()); This doesn't work console.log('- "this.exampleProperty" is undefined:'); console.log(this.exampleProperty); console.log('- To access the component\'s "this.exampleProperty" the event data must be used:'); const exampleComponent = event.data; console.log(exampleComponent.exampleProperty); console.log('end exampleMethod() ************************************************************'); }, });

这里有Ember Twiddle。

虽然这是一个有效的解决方案，但我发现它很丑陋且不实用。所以如果你有更好的方法，请发帖。

我发现还有其他更糟糕的选项，比如将组件属性传递给事件数据而不是整个组件，但这样一来，如果更新属性，事件数据就不会得到更改。

Answer 4

我希望在solution of Paul Bishop之后提供bind()但没有unbounding problem pointed out by kumkanillam的完整示例，并避免使用像exampleMethodHandler这样的额外处理程序对象：

应用/组件/示例-component.js：

import Ember from 'ember'; export default Ember.Component.extend({ exampleProperty: 'example value', didInsertElement() { this._super(...arguments); // create a new function with 'this' as bound argument this.exampleMethod = this.exampleMethod.bind(this); // bind exampleMethod() function to event without arguments Ember.$('body').click(this, this.exampleMethod).click(); }, willDestroyElement() { this._super(...arguments); // unbind exampleMethod() function from event successfully without arguments Ember.$('body').off('click', this.exampleMethod); }, exampleMethod() { // inside exampleMethod() 'this' is the Ember.js component // as bound before, not the DOM element that has triggered the event console.log('Ember.js property: ", this.get('exampleProperty')); }, });


bind()函数创建一个新的绑定函数（BF）。 BF 是一个   异国情调的功能对象（来自 ECMAScript 2015 的术语）包装   原始功能对象。调用 BF 通常会导致   执行包装函数。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

因此，如果使用bind()创建一个新函数，如果它被匿名使用，则无法在以后重新调整。因此，这不起作用：

// bind() creates a new function which here is anonymous Ember.$('body').click(this, this.exampleMethod.bind(this)); // this.exampleMethod() is not the former anonymous function Ember.$('body').off('click', this.exampleMethod); // here things are worse as a new anonymous function is created Ember.$('body').off('click', this.exampleMethod.bind(this));

为了能够在以后引用新的绑定函数，必须将其命名为：

// create new bound function and store it in 'this.exampleMethod' this.exampleMethod = this.exampleMethod.bind(this); // bound function this.exampleMethod() referenced Ember.$('body').click(this, this.exampleMethod); // same bound function this.exampleMethod() referenced again Ember.$('body').off('click', this.exampleMethod);

访问由事件调用的组件方法内的组件属性

4 个答案: