CODEWITHSUNDEEP
javascriptember.js
jermainecraig
jermainecraig

Reputation: 311

How to show/hide divs in EmberJS?

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. 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:

enter image description here

I have the following issues as a result of this approach

Upvotes: 0

Views: 1798

Answers (2)

PowPi
PowPi

Reputation: 163

Some ideas:

I’m not entirely sure how I’d hide the box by clicking outside of it

handleOutsideClick: function(event) {
   //hide element;
},
setupOutsideClickListener: Ember.on('didInsertElement', function() {
   let clickHandler = this.get('handleOutsideClick').bind(this);

   return Ember.$(document).on('click', clickHandler);
})

The box once revealed is persistent across routes

I guess you mean when you click one of the links in the box, the box is still visible when routed to the next page. That's normal behavior. Just add a action to the link and close your element before routing or while routing.

Is it possible to attach an animation (like a fade) using this approach? (I imagine not)

if you only want simple animations, you can use jquery.

toggleAnimation: function(isOpen, section) {
 if (isOpen) {
   section.slideUp(400);
 } else {
   section.animate({
     height: 'toggle'
   }, 400, function() {
     section.slideDown(400);
   });
 }
},

section is here a dom element. 

Is this even the correct way to approach something like this in EmberJS?

Yes. There are always other approaches an methods but you can make something like you expect with ember.

Upvotes: 2

Lux
Lux

Reputation: 18240

I’m not entirely sure how I’d hide the box by clicking outside of it

This is actually a bit tricky. You could manually attach event listeners for this in disInsertElement or use a big invisible div overlay with an action handler. There are also plugins for this, although I didn't tested this one.

The box once revealed is persistent across routes

Why shouldn't it be? If you transition away so the component is no longer visible then the box also won't be. But if you just transition inside a nested outlet you keep the state.

Is it possible to attach an animation (like a fade) using this approach? (I imagine not)

Checkout liquid-fire.

Is this even the correct way to approach something like this in EmberJS?

Complicated question. You probably could do it just in CSS. Its definitely not wrong, so go with it.

The question is a bit where to save this state. The component has a limited livecycle, but if that lifecycle goes along with your requirements its good.

Its also easy to integrate other plugins and things like Bootstrap DropDowns, it always depends a bit on your preference.

Upvotes: 1

Related Questions