从 DOM 元素中获取 Ember 组件答案

【问题标题】：Get an Ember Component from the DOM Element从 DOM 元素中获取 Ember 组件
【发布时间】：2016-02-21 21:36:44
【问题描述】：

我有一个 Ember 组件...

export default Ember.Component.extend({
    didInsertElement: function() {
        this.$().sortable({
            connectWith: '.droppable-box',
            receive: (e, ui) => {

            }
        });
    },
    tagName: 'ul',
    classNames: ['droppable-box', 'list-unstyled']
});

可排序组件内的元素也是组件...

export default Ember.Component.extend({
    tagName: 'li'
});

只要将元素移动到可排序组件中，就会触发接收事件。

我获得了 DOM 元素，但我想访问该 Ember 组件的实例。有什么想法吗？

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

有一种更简洁的方法可以做到这一点，但使用 Ember 私有 API。

Ember.Component 的根元素被分配了一个 id。您可以使用此 id 来查找组件。

// Ember 1.x
Ember.View.views[id]

// Ember 2.x
container.lookup('-view-registry:main')[id]

我确实相信有一个容器实例附加到组件。

【讨论】：

【解决方案2】：

这不是最干净的解决方案，但应该可以。

在您的子组件中添加以下生命周期钩子：

//components/child-component.js
...
registerRow: Ember.on('willInsertElement', function () {
  this.attrs.onRegister(this.get('elementId'), this);
}),

unregisterRow: Ember.on('willDestroyElement', function () {
  this.attrs.onUnregister(this.get('elementId'));
}),

在父模板中，将动作处理程序传递给所有子组件：

//components/parent-component.hbs
{{#each children as |child|}}
  {{child-component onRegister=(action "registerChild") onUnregister=(action "unregisterChild")}}
{{/each}}

在父组件中，创建一个字典来存储由其elementId索引的子组件：

//components/parent-component.js
...
children: null,

initChildren: Ember.on('init', function () {
  this.set('children', {});
}),

actions: {
  registerChild(elementId, child) {
    this.children[elementId] = child;
  },

  unregisterChild(elementId) {
    delete this.children[elementId];
  }
}

现在，要从 jQuery 回调中访问组件，请执行以下操作：

// Presuming ui is a DOM element
receive: (e, ui) => {
    let component = this.children[ui.id];
}

【讨论】：