在 Ember 2.x 中停止冒泡/传播

Question

在 Ember 2.18 的这种情况下，是否有适当的方法来停止冒泡？我在文档中找不到匹配的示例，但设法在网络上找到了另外两个示例。两者都有效，但其中一个似乎已被弃用，因为我在最新版本的 Ember 文档中找不到对它的引用。

场景： 我有一个容器。我想点击它来展开/打开它。在容器内，我有一个按钮。我想单击按钮将其关闭。一般的问题是点击按钮关闭也会触发父容器的点击事件打开。

要解决，我相信我需要在单击按钮时防止冒泡/传播。

我找到的两个解决方案如下：

解决方案 #1：

event.stopPropagation();

组件 JS：

import Component from '@ember/component';

export default Component.extend({
  tagName: "section",
  classNames: ["Container"],
  classNameBindings: ['isOpen:Container--open'],
  isOpen: false,

  click() {
    if (!this.get('isOpen')) {
      this.send('openContainer');
    }
  },

  actions: {
    openContainer() {
      this.toggleProperty('isOpen');
      // JS removed for demo
    },

    closeContainer(event) {
      this.toggleProperty('isOpen');
      // JS removed for demo
      event.stopPropagation();
    }
  }
});

组件 HBS：

<button onclick={{action 'closeContainer'}}>Close</button>

解决方案 #2：

气泡=假

组件 JS：

import Component from '@ember/component';

export default Component.extend({
  tagName: "section",
  classNames: ["Container"],
  classNameBindings: ['isOpen:Container--open'],
  isOpen: false,

  click() {
    if (!this.get('isOpen')) {
      this.send('openContainer');
    }
  },

  actions: {
    openContainer() {
      this.toggleProperty('isOpen');
      // JS removed for demo
    },

    closeContainer() {
      this.toggleProperty('isOpen');
      // JS removed for demo
    }
  }
});

组件 HBS：

<button {{action 'closeContainer' bubbles=false}}>Close</button>

感谢所有反馈。谢谢！

Answer 1

你在正确的轨道上。

以下是当前 Ember 2.18 处理事件冒泡的方法。

// No bubbling
import Component from '@ember/component';

export default Component.extend({
  doubleClick() {
    alert('DoubleClickableComponent was clicked!');
  }
});

// Allow bubbling
import Component from '@ember/component';
import Ember from 'ember';

export default Component.extend({
  doubleClick() {
    Ember.Logger.info('DoubleClickableComponent was clicked!');
    return true;
  }
});

Ember Guides Handling Events

您使用 bubbles=false 的第二个解决方案在 Ember 2.18 中仍然可以接受。请参阅事件传播。

Template Helper Method Action

再次，对于误读您的问题，我深表歉意。