Trouble with a Semantic UI/jQuery dropdown button using a block component in Ember JS

Question

I'm having difficulty getting a Semantic UI (1.12.2) jQuery dropdown button located inside a block component to work in Ember JS (1.11.0). I think I understand the run loop issues with binding jQuery to elements in Ember but in this case I think something nuanced is happening that I am not aware of.

I have a template that calls my component like 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 is as follows:

import Ember from '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 my 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 is pulled in via ember-data from an API asynchronously and so is a promise. I have placed the jQuery binding to .dropdown() inside a "didInsertElement" function and in order to make sure the promise has returned and the list has been rendered it is also scheduled for the next iteration of the run loop "afterRender".

However, when I click the dropdown button no dropdown appears. There are no errors and the dropdown() function is definitely being called upon the dropdown button element as I have checked it. I suspect that I have missed something and the dropdown() jQuery method is binding before the AJAX call that returns the "applicationStatuses" collection, meaning the list hasn't been populated when it runs.

If I take all of this out of the component and create it all in the parent controller/template the button dropdown works but components are the way to go so I'd appreciate any help anyone can offer.

Thanks.

danr1979 danr1979 · Accepted Answer · 2015-05-08T15:59:55

I resolved this issue in the end. The problem was caused by me forgetting that Ember components wrap their htmlbars template in a div (this can be customised to be a different tag but it's a div by default). This meant that when I called my jQuery dropdown method it was bring called on the wrapper div & not the .ui.dropdown.button div, which caused it to fail.

The fix I used was to remove the wrapper div from the htmlbars template & use the "classNames" & "classNameBindings" properties of the component's JS file to add the correct classes to the ember wrapper.

Trouble with a Semantic UI/jQuery dropdown button using a block component in Ember JS

2 Answers