如何创建在视图层次结构中冒泡的自定义事件？

Question

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

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

为了处理"Submit“按钮，我让"submit”表单事件冒泡，并在MyAddressFormView的submit方法中处理它。

但是如何对"Cancel“按钮执行同样的操作呢？例如，有没有办法在子视图中触发自定义的"cancel form“事件，让它冒泡，并在祖先视图中处理它？

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冒泡。

首先包含这个混入：

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

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

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