riot.js：倾听另一个元素的事件

Question

假设我有两个自定义元素：a和b。 a包含可以单击的另一个元素，我想在发生这种情况时触发自定义事件。那个自定义事件应该被元素b捕获。

我可以在元素a中使用this.trigger，但是元素b中的this.on不会捕获事件（这似乎是合乎逻辑的，因为它没有在b上触发）。

所以：我可以检索元素b中的元素a来执行元素b中的“elementA.on（）”吗？

基本上，我想要像RiotControl这样的功能，但不存储数据，因为我只是想在我的用例中触发一个模态而不存储任何内容。

我可能会回到jQuery并触发并监听文档上的事件，但这真的是一个好方法吗？

Answer 1

您可以创建共享的可观察对象，例如：

var eventBus = riot.observable();

挂载元素时，可以将其作为选项传递：

riot.mount('elementa', { eventBus: eventBus })
riot.mount('elementb', { eventBus: eventBus })

然后他们可以听取并触发同一个观察者：

this.opts.eventBus.trigger('openModal', ...maybeSomeOptions);
this.opts.eventBus.on('openModal', function(...maybeSomeOptions) {});

免责声明：riotjs对我来说是新手

Answer 2

我解决这个问题的方法是使用mixin自动将相同的Observable包含在多个标签中。

// mixins.js
let ObservableMixin = {
    observable: riot.observable()
};

然后在我希望共享observable存在的任何.tag文件中，我只需要调用。

// Any .tag file
this.mixin(ObservableMixin);
...
this.observable.trigger('eventName', { optional: options });

有关mixins的更多信息，请查看：Riot Mixins