在 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" 绑定是通过 ember-数据从 API 异步引入的，因此也是一个承诺。我已经将 jQuery 绑定到 .dropdown() 放在 "didInsertElement" 函数中，为了确保 promise 已经返回并且列表已经呈现，它也被安排在运行循环"afterRender".

但是，当我单击下拉按钮时，没有出现下拉菜单。没有错误，并且 dropdown() 函数肯定是在我检查过的下拉按钮元素上调用的。我怀疑我错过了一些东西并且 dropdown() jQuery 方法在 AJAX 调用 returns "applicationStatuses" 集合之前绑定，这意味着列表尚未填充当它运行s.

如果我把所有这些都从组件中取出并在父组件中创建它 controller/template 按钮下拉菜单可以工作，但组件是可行的，所以我很感激任何人可以提供的帮助。

谢谢。

Answer 1

换行即可解决

{{action: 'changeStatus'}}

至此

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

Answer 2

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

我使用的修复方法是从 htmlbars 模板中删除包装器 div 并使用组件 JS 文件的 "classNames" & "classNameBindings" 属性添加正确的类到 ember 包装器。

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

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

jquery

ember.js

semantic-ui