Question

我很难获得位于块组件内的Semantic 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>

＆＃34; applicationStatuses＆＃34;绑定是通过来自API的ember-data异步提取的，因此是一个承诺。我已将jQuery绑定放在＆＃34; didInsertElement＆＃34;中的.dropdown（）。函数，为了确保承诺已经返回并且列表已经呈现，它也被安排用于运行循环的下一次迭代＆＃34; afterRender＆＃34;。

但是，当我点击下拉按钮时，不会显示下拉列表。没有错误，下拉按钮元素肯定会调用dropdown（）函数，因为我已经检查过了。我怀疑我错过了一些东西，并且在返回＆＃34; applicationStatuses＆＃34;的AJAX调用之前，dropdown（）jQuery方法是绑定的。集合，意味着列表在运行时没有填充。

如果我从组件中取出所有这些并在父控制器/模板中创建所有这些按钮下拉列表，但组件是可行的方式，所以我很感激任何人都可以提供帮助。

感谢。

Answer 1

我最终解决了这个问题。问题是由于我忘记了Ember组件将他们的htmlbars模板包装在div中（这可以自定义为不同的标签，但默认情况下它是div）。这意味着当我调用我的jQuery下拉方法时，它会调用包装器div＆amp; amp;而不是.ui.dropdown.button div，导致它失败。

我使用的修复方法是从htmlbars模板＆amp;中删除包装div。使用“classNames”＆amp;组件的JS文件的“classNameBindings”属性，用于将正确的类添加到ember包装器中。

Answer 2

如果更改行

，可以解决

{{action: 'changeStatus'}}

到这个

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

使用Ember JS中的块组件的语义UI / jQuery下拉按钮出现问题

2 个答案: