Play Dropstrap Dropdown functionality in Ember.js

Question

Edit:. Looking for a way to close the dropdown when nothing but a button: http://jsfiddle.net/brennan/s4JTn/

I am looking for (re) to create a twitter dropdown menu in my ember application. I have a problem trying to close the dropdown menu when nothing but a click is clicked. I.e. I am looking for a way to add an event listener to my application in order to close my drop-down menu when the application body is clicked.

Here is my (child) view.

categorySelect: Ember.View.extend({ isOpen: false, selected: /* removed for brevity */, content:[ /* removed for brevity */ /* follows structure: {slug: 1, title: 'title', isActive: true} */ ], dropdownToggle: function(e){ var open = this.get('isOpen'); if(open){ this.set('isOpen', false); }else{ this.set('isOpen', true); } }, select: function(e){ var selected = e.context; this.content.setEach('isActive', false); this.set('selected', selected); selected.set('isActive', true); this.set('isOpen', false); } }) 

and here is my template code ...

 {{#view categorySelect tagName="div" class="btn-group" classBinding="isOpen:open"}} <a class="btn dropdown-toggle btn-facebook btn-small" {{action "dropdownToggle" on="click"}} href="#"> {{selected.title}} <span class="caret"></span> </a> <ul class="dropdown-menu pull-right"> {{#each content}} <li {{bindAttr class="isActive:active"}}><a href="#" {{action "select" on="click"}}>{{title}}</a></li> {{/each}} </ul> {{/view}} 

I tried adding event listeners to the body as shown below, which does not work. Ember seems to stop spreading if I click on any corner looks. Therefore, when it works, if I click directly on the body, it does not work if I click on any of my views :(

 didInsertElement: function(){ var self = this; $('body').on('click', function(){ self.set('isOpen', false); }); }, 

Seek help and advice. Also, if any of the above code looks like shit, please let me know. I am looking to learn as much as possible.

Answer 1

I have about the same setup as you, which works by creating an event listener on the body element using didInsertElement.

The only difference: I have an e.stopPropagation () call in dropdownToggle:

 dropdownToggle: function(e){ // [removed] e.stopPropagation(); }, 

Without this line, I could not open the drop-down list, since clicking on the drop-down list spreads to the body and immediately closes it.

In my setup, clicks on views apply to the body (therefore, the above code), and clicking on other views calls the event listener on the body.

My guess: do you have some kind of code in your other views that stops the spread of the body?

Try http://jsfiddle.net/bjaeP/ for an example.

Answer 2

I changed your fiddle: http://jsfiddle.net/tV8X6/

This works for me. Just removed the action helper for "dropdownToggle" and added the data attribute to the a tag and added the "dropdown" class to your "categorySelect" view