Ember.js 余烬关闭响应菜单

我在Ember中关闭响应菜单时遇到问题。当前我有一个菜单图标，如果有人按下此按钮，将触发以下操作：

export default Ember.Controller.extend({
    actions: {
        openMenu() {
            $('#menu').toggle();
        }
    }
});

这自然会打开我的菜单。然而，当有人按下一个链接（不管它在页面上的什么位置）时，我显然希望菜单再次关闭。我发现很难做到这一点

基本上我想要的是：

$('a').click(function() {
    $('#menu').hide();
});

但是我根本不知道把这个代码放在哪里

我曾经考虑过添加一个新的助手，它模仿Ember

linkTo

helper，但我确信这不是解决问题的正确方法。还是这样

---

免责声明：我真的是新的余烬。我使用的是2.2版，我知道他们正在逐步淘汰控制器，我也在努力；）

鉴于Ember正在逐步淘汰控制器，您应该将openMenu操作放在路由中。您可以将隐藏事件添加到同一路由中的DIDTransformation挂钩

//route-name.js
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {

    didTransition: function() {
      Ember.$('a').click(function() {
        Ember.$('#menu').hide();
      });
    },

    openMenu: function() {
      Ember.$('#menu').toggle();
    }

  }
})

---

更优雅的解决方案是监听组件本身上的单击事件

export default Ember.Component.extend({
  actions: {
    openMenu() {
      this.$('#menu').toggle();
    }
  },

  // use Ember's built in click handler
  // https://guides.emberjs.com/v2.1.0/components/handling-events/
  click(event) {
    // check if the link is clicked
    if (event.target.tagName.toLowerCase() === 'a') {
      this.$('#menu').hide();
    }
  }
});

---

谢谢。这对我帮助很大！但菜单通常是全球性的。我不太明白你为什么要把它附加到一条特定的路线上。