Best way to show/hide divs

@jermaine wrote:

I’m also generally looking for some advice on best practise in Ember as I still haven’t figured out how I’ll approach general interactions (newbie). The interaction in question here is a small menu that’s toggled when you click on a dropdown link.

I’ve created the following component for this dropdown link.

export default Ember.Component.extend({
  classNames: ['dib'],
  isClicked: false,
  actions: {
    showMenu: function(){
      this.toggleProperty('isClicked');
    }
  } 
});

And of course in the .hbs file I have something like the following:

{{#if isClicked}}
    // Code goes here
{{/if}}

The end result is this:

Image may be NSFW.
Clik here to view.

so.png1170x720 26.7 KB

I have the following issues as a result of this approach

• I’m not entirely sure how I’d hide the box by clicking outside of it
• The box once revealed is persistent across routes
• Is it possible to attach an animation (like a fade) using this approach? (I imagine not)
• Is this even the correct way to approach something like this in EmberJS?

Is there a good guide out there for the best way to approach things like this / modals.

Posts: 2

Participants: 2

Read full topic