在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：

bubbles=false

构成部分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指南处理事件

使用bubbles=false的第二个解决方案在Ember2.18中仍然可以接受。参见事件传播。

模板帮助方法动作

再次，我很抱歉误解了你的问题。