title: Dropdown Menu with Ember.js
body: <p>I can't get my ember and bootstrap drop down menu to work. It doesn't even show.
  Hbs is below. I'm using yeoman as the build.</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
    &lt;ul&gt;
    {{#link-to 'index' class="navbar-brand"}}&lt;i class="fa fa-home fa-fw"&gt;&lt;/i&gt;&amp;nbsp;Home{{/link-to}}
    {{#link-to 'about' class="navbar-brand"}}About Me{{/link-to}}
    {{#link-to 'portfolio' class="navbar-brand"}}Portfolio{{/link-to}}
    {{#link-to 'hereIam' class="navbar-brand"}}Here I am{{/link-to}}
    {{#link-to 'contact' class="navbar-brand"}}&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&amp;nbsp;Contact Me{{/link-to}}
        {{#dropdown-list selected=selected item="default"}}
          {{partial "dropdown-menu"}}
        {{/dropdown-list}}
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the dropdowns.js:</p>
  
  <pre><code>Earthstewarddesigns.DropdownListComponent = Ember.Component.extend({
    classNames: 'btn-group',
    isDropdownVisible: false,
  
    btnClassName: function(){
      return 'btn-'+this.get('item');
    }.property('item'),
  
    actions: {
      toggle: function(item){
        this.toggleProperty('isDropdownVisible');
      }
    }
  });
  </code></pre>
  
  <p>Here is the View:</p>
  
  <pre><code>Earthstewarddesigns.ApplicationView = Ember.View.extend({
    classNames: 'dropdowns',
  
    click: function(e){
      if (jQuery(e.target).is('.dropdowns')){
        jQuery('ul.dropdown-menu').hide();
      }
    }
  });
  </code></pre>
  
  <p>And Last the templates:</p>
  
  <p>_dropdown-menu.hbs:</p>
  
  <pre><code>&lt;ul class="dropdown-menu"&gt;
        {{#link-to 'watering'}}Action{{/link-to}}
        &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
        &lt;li class="divider"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>component/dropdown-list.hbs:</p>
  
  <pre><code>&lt;button type="button" {{bind-attr class=":btn :dropdown-toggle btnClassName"}} {{action "toggle"}}&gt; {{item}} &lt;span class="caret"&gt;&lt;/span&gt; &lt;/button&gt;
  
  {{#if isDropdownVisible}}
      {{yield}}
  {{/if}}
  </code></pre>