Question

我在关闭Ember的响应式菜单时遇到了麻烦。目前我有一个菜单图标，如果有人按此按钮，则会触发以下操作：

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

这自然会打开我的菜单。但是，当有人按下链接时（无论页面在哪里），我显然希望菜单再次关闭。我发现如何执行此操作很困难。

基本上我想要的是：

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

但我根本不知道在哪里放置此代码。

我考虑过添加一个模仿Ember linkTo助手的新助手，但我确信这不是解决问题的正确方法。或者是吗？

免责声明：我对Ember很新。我使用2.2版，我知道他们正在逐步淘汰控制器，我也在努力;）。

Answer 1

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

//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();
    }

  }
})

Answer 2

更优雅的解决方案是听取组件本身的点击事件。

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();
    }
  }
});

Ember关闭响应式菜单

2 个答案: