Question

我在Ember组件中有一个简单的bootstrap / 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>

但这根本不会触发余烬行动（甚至没有告诉我，如果我提供了错误的名字，没有任何事情可以处理）。
激活该动作的唯一方法是删除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，但这对我来说似乎很奇怪（我不知道该怎么做）。

Answer 1

我让它发挥作用，但感觉就像是一个黑客，并且仍然没有触发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点击事件的路由转换：

// 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-action并触发jQuery事件）但是现在它＆＃39;以某种方式工作。

Bootstrap切换和Ember动作同时发生

1 个答案: