使用Ember JS中的块组件使用语义UI/jQuery下拉式按钮麻烦

Question

我很难在块组件内部获得语义UI（1.12.2）jQuery下拉按钮，可以在Ember JS（1.11.0）中使用。我想我了解跑步循环问题，将jQuery绑定到Ember中的元素，但在这种情况下，我认为正在发生一些细微的事情，我不知道。

我有一个称我的组件这样的模板：

{{#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}}

我的组件JS代码如下：

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

和我的组件.hbs视图是：

<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>

" ApplicationStatuses"结合被从API异步从API中拉入，因此也是一个承诺。我已经将jQuery绑定到.dropdown（）的" didInsertEllement"功能中，并为了确保返回的承诺已返回并已渲染列表，它也已安排在运行循环的下一次迭代"后方"。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</p>

但是，当我单击"下拉"按钮时，没有下拉。没有错误，在我检查时，在下拉按钮元素上肯定会调用下拉函数函数。我怀疑我错过了一些东西，并且下拉jquery方法在返回" ApplicationStatuses"集合的AJAX调用之前绑定了，这意味着该列表运行时尚未填充列表。

如果我将所有这些都从组件中删除并在父控制器/模板中创建所有这些，则按钮下拉有效，但组件是可以使用的方式，因此我感谢任何人都能提供的任何帮助。

谢谢。

Answer 1

我最后解决了这个问题。问题是由于我忘记了Ember组件将其HTMLBARS模板包裹在DIV中（可以自定义为不同的标签，但默认情况下是DIV）。这意味着，当我打电话给我的jQuery下拉方法时，它被召唤了包装Div＆amp;不是.ui.dropdown.buttondiv，这导致其失败。

我使用的修复程序是从HTMLBARS模板中删除包装器div＆amp;使用" classNames"＆amp;组件的JS文件的" classNameBindings"属性将正确的类添加到Ember包装器中。

Answer 2

如果您更改行

可以解决它

{{action: 'changeStatus'}}

到这个

{{action: 'changeStatus' target='view'}}