Question

我是Ember.js的新手，我在理解其哲学方面遇到了一些问题。我知道操作，数据下降但在现实生活中，我可以说我在my-gallery组件中初始化了Fotorama（我不知道这是否可以，但我做了它在didInsertElement方法中）。这个图书馆有自己的活动。它们在普通JS中看起来像这样：

$('.fotorama').on('fotorama:ready', function (e, fotorama) {});

或：

$('.fotorama').on('fotorama:show', function () {});

但我觉得在Ember中，那些应该以某种方式映射到组件中的动作。我的问题是：怎么样？我需要在这些操作中触发一些操作（被其他组件或路由器捕获）。所以我认为它应该是这样的：this.sendAction('actionName', actionParams);

Answer 1

您可以保持组件引用以调用sendAction方法。

didInsertElement(){
 this._super(...arguments);
 var _this=this;
 this.$('.fotorama').on('fotorama:show', function () {
  _this.sendAction('actionName', actionParams);
 });
}
willDestroyElement(){
 this._super(...arguments);
 this.$('.fotorama').off('fotorama:show')
}

如果我们找到这个问题的更好答案。我很乐意删除我的答案。

Answer 2

我有类似的问题。我需要第三方库与我的ember应用程序对话，所以我在我的ember应用程序中注册了一个自定义事件：

const App = Ember.Application.extend({
  customEvents: {
    foo: 'foo',
  },
});

然后从第三方代码触发它：

<a href="..." onclick="$(this).trigger('foo'); return false;">

并且，在组件中，根据文档编写该事件的处理程序：

export default Ember.Component.extend({
  foo(event) {
    console.warn('event happened', event);
  },
});

请参阅：
* https://guides.emberjs.com/v3.0.0/components/handling-events/
* https://www.emberjs.com/api/ember/release/classes/Application/properties/customEvents?anchor=customEvents

这个答案有用吗？

如何处理ember.js组件中的自定义事件？

2 个答案: