Question

我无法让我的余烬和引导程序下拉菜单工作。它甚至没有显示出来。 Hbs在下面。我正在使用自耕农作为构建。

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul>
  {{#link-to 'index' class="navbar-brand"}}<i class="fa fa-home fa-fw"></i>&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"}}<i class="fa fa-envelope"></i>&nbsp;Contact Me{{/link-to}}
      {{#dropdown-list selected=selected item="default"}}
        {{partial "dropdown-menu"}}
      {{/dropdown-list}}
  </ul>
</div>

这是dropdowns.js：

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');
    }
  }
});

以下是视图：

Earthstewarddesigns.ApplicationView = Ember.View.extend({
  classNames: 'dropdowns',

  click: function(e){
    if (jQuery(e.target).is('.dropdowns')){
      jQuery('ul.dropdown-menu').hide();
    }
  }
});

最后的模板：

_dropdown-menu.hbs：

<ul class="dropdown-menu">
      {{#link-to 'watering'}}Action{{/link-to}}
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
</ul>

组件/下拉-list.hbs：

<button type="button" {{bind-attr class=":btn :dropdown-toggle btnClassName"}} {{action "toggle"}}> {{item}} <span class="caret"></span> </button>

{{#if isDropdownVisible}}
    {{yield}}
{{/if}}

下拉菜单与Ember.js

0 个答案: