ember.js - Trouble with a Semantic UI/jQuery dropdown button using a block component in Ember JS -

i'm having difficulty getting semantic ui (1.12.2) jquery dropdown button located inside block component work in ember js (1.11.0). think understand run loop issues binding jquery elements in ember in case think nuanced happening not aware of.

i have template calls component this:

{{#sui-button-dropdown colour="black" icon="retweet" text="change status"}}     {{#each status in applicationstatuses}}         <div class="item">             <div class="ui {{status.colour}} label"></div>             {{status.description}}         </div>     {{/each}} {{/sui-button-dropdown}} 

my component js code follows:

import ember 'ember';  export default ember.component.extend({     didinsertelement: function() {         ember.run.scheduleonce('afterrender', this, function() {             this.$().dropdown({action: 'select'});         });     },     actions: {         changestatus: function() {             this.$().dropdown('toggle');         }     } }); 

and component .hbs view is:

<div class="ui {{colour}} labeled icon dropdown button" {{action: 'changestatus'}}>     <input type="hidden" value="{{value}}" />     <i class="icon {{icon}}"></i>     <span class="text">{{text}}</span>     <div class="menu">         {{yield}}     </div> </div> 

the "applicationstatuses" binding pulled in via ember-data api asynchronously , promise. have placed jquery binding .dropdown() inside "didinsertelement" function , in order make sure promise has returned , list has been rendered scheduled next iteration of run loop "afterrender".

however, when click dropdown button no dropdown appears. there no errors , dropdown() function being called upon dropdown button element have checked it. suspect have missed , dropdown() jquery method binding before ajax call returns "applicationstatuses" collection, meaning list hasn't been populated when runs.

if take of out of component , create in parent controller/template button dropdown works components way go i'd appreciate can offer.

thanks.

i resolved issue in end. problem caused me forgetting ember components wrap htmlbars template in div (this can customised different tag it's div default). meant when called jquery dropdown method bring called on wrapper div & not .ui.dropdown.button div, caused fail.

the fix used remove wrapper div htmlbars template & use "classnames" & "classnamebindings" properties of component's js file add correct classes ember wrapper.