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.<\/p>\n
I have a template that calls my component like this:<\/p>\n
{{#sui-button-dropdown colour=\"black\" icon=\"retweet\" text=\"Change Status\"}}\n {{#each status in applicationStatuses}}\n \n \n {{status.description}}\n \n {{\/each}}\n{{\/sui-button-dropdown}}\n<\/code><\/pre>\nMy component js code is as follows:<\/p>\n
import Ember from 'ember';\n\nexport default Ember.Component.extend({\n didInsertElement: function() {\n Ember.run.scheduleOnce('afterRender', this, function() {\n this.$().dropdown({action: 'select'});\n });\n },\n actions: {\n changeStatus: function() {\n this.$().dropdown('toggle');\n }\n }\n});\n<\/code><\/pre>\nAnd my component .hbs view is:<\/p>\n
\n \n \n {{text}}\n \n {{yield}}\n \n\n<\/code><\/pre>\nThe “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”.<\/p>\n
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.<\/p>\n
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.<\/p>\n
Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-8168","post","type-post","status-publish","format-standard","hentry","category-semantic"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=8168"}],"version-history":[{"count":2,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8168\/revisions"}],"predecessor-version":[{"id":8726,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8168\/revisions\/8726"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=8168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=8168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=8168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}