Ember閉じる応答メニュー

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アクションをルートに配置する必要があります。同じ経路のdidTransitionフックにhideイベントを追加することができます。

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