Bootstrap 切换和 Ember 操作同时进行答案

【问题标题】：Bootstrap toggle AND Ember action simultaniouslyBootstrap 切换和 Ember 操作同时进行
【发布时间】：2016-01-09 00:15:42
【问题描述】：

我在 Ember 组件中有一个简单的引导程序/jQuery 导航栏：

<ul class="nav-main">
    <li>
        <a class="nav-submenu" data-toggle="nav-submenu" href="#">Workgroups</a>

            <ul>
              {{#each workgroups as |workgroup|}}
                 <li>
                    {{#link-to 'workgroup' workgroup.id tag='a'}}{{workgroup.label}}{{/link-to}}
                </li>
              {{/each}}
            </ul>
    </li>

直到一切就绪（显示子菜单）。
但是现在我想在单击“工作组”以显示所有工作组的列表时转换到路线（通过操作）：

<a class="nav-submenu" data-toggle="nav-submenu" href="#" {{action 'transition'}}>Workgroups</a>

但这根本不会触发 ember 操作（如果我提供了错误的名称，甚至不会告诉我没有处理该操作）。
使该动作触发的唯一方法是删除data-toggle，这当然不会再打开子菜单了。

在这里我尝试了一些答案：

// in compenent
didInsertElement: function(){
    Ember.$('[data-toggle=nav-submenu]').click(function(event) {
        console.log('data-toggle was clicked');
        console.log(event);
        event.stopPropagation();
    });
}

这在控制台中给了我合理的输出，但仍然不会触发操作。

所以问题是我是否以及如何使两者都触发它的动作。
我能想到的一种可能的解决方法是在我的 Ember-Action 中触发 jQuery-Event，但这对我来说似乎很奇怪（而且我不知道该怎么做）。

【问题讨论】：

标签： jquery ember.js

【解决方案1】：

我让它工作了，但感觉就像一个 hack，仍然没有触发 Ember 动作。但它适用于特定情况。

我做了什么：
我通过初始化器将路由器注入到组件中：

// app/initializers/component-router-initializer.js
export function initialize(container, application) {
  application.inject('component', 'router', 'router:main');
}

export default {
  name: 'component-router-injector',
  initialize: initialize
};

然后在模板中使用自定义数据属性向 jQuery click-event 添加路由转换：

// components/mynavbar.js
export default Ember.Component.extend({
    didInsertElement: function(){
        let that=this;
        Ember.$('[data-toggle=nav-submenu]').click(function(event) {
            console.log(event.currentTarget.dataset.transition);
            that.get('router').transitionTo(event.currentTarget.dataset.transition);
        });
},

在组件模板中

// components/mynavbar.hbs
// some other stuff above
<a class="nav-submenu" data-toggle="nav-submenu" data-transition="workgroups" href="#">Workgroups</a>
// even more stuff below

我还没有在 Chrome 之外的其他浏览器中测试过它，我会尝试相反的方式（首先触发 Ember 动作并在其中触发 jQuery 事件），但现在它以某种方式工作.

【讨论】：