ember.js - 如何使自定义事件在视图层次结构中冒泡？

Question

我有按钮视图，它们是我编写的一组 Ember.js 表单助手的一部分。例如 MyAddressFormView 有以下模板：

{{#form}}
  {{textArea address}}
  {{submitButton}}
  {{cancelButton}}
{{/form}}

为了处理“提交”按钮，我让“提交”表单事件冒泡，并在submitMyAddressFormView 的方法中处理它。

但是我该如何为“取消”按钮做同样的事情呢？例如，有什么方法可以在子视图中触发自定义“取消表单”事件，让它冒泡，然后在祖先视图中处理它？

Answer 1

我建议触发一个 jQuery 特殊事件并使用您的 Ember 应用程序上的映射注册该事件。例如：

Ember.Application.create({
  customEvents: {
    // key is the jquery event, value is the name used in views
    formcancel: 'formCancel'
  }
});

在您的 cancelButton 视图中：

click: function(evt){
  Ember.$().trigger('formcancel')
}

这将以与其他映射的 Ember DOM 事件相同的方式冒泡。

Answer 2

Ember.ActionHandler 通过其“目标”属性冒泡事件。默认情况下，可以覆盖 Ember.View 的目标以让事件通过 parentViews 冒泡。

首先包含这个mixin：

(function() {
    Ember.View.reopen({
        // Let actions bubble to parentView by default.
        target: function() {
            return this.get('parentView');
        }.property('parentView')
    });
})();

然后像往常一样发送事件：

tap: function() { this.send('someEvent'); }