Question

我的页面上有多个标签，可链接到一些内部路线。当用户单击选项卡时，必须呈现路线，并且必须突出显示该选项卡，但单击几次后，突出显示不会转移到新选项卡，并且旧选项卡仍保持突出显示，但是单击的选项卡的路线被渲染。

突出显示是通过li标签内的操作完成的，并且＃link-to嵌套在li标签内。

到目前为止，在我的调查中，我发现单击事件没有发生。我收到了很多鼠标事件，但没有单击事件。好像点击事件被吃光了。

<ul class="nav nav-tabs">
 {{# each tab in tabBars}}
   <li {{action 'someAction'}}>{{#link-to tab.link}}{{/link-to}}</li>
 {{/each}}
</ul>

单击选项卡并突出显示新选项卡时，应始终触发该操作。

Answer 1

尝试执行以下操作：

{{#link-to tab.link tagName='li'}}click me{{/link-to}}

（并省略<li>标签）。

然后，您可以检查active类以突出显示li元素。

Answer 2

{{link-to}}助手将呈现一个链接，如果该链接与当前路线匹配，则该链接将另外获得一个class="active"。然后，您可以通过CSS设置样式。

请参见https://guides.emberjs.com/v1.10.0/templates/links/并搜索“有效”。

其他选项

由于{{link-to}}将触发tab.link路线的beforeModel钩子，因此也许在这里您可能希望将与视图相关的属性设置为“数据压缩”到{ {1}}。我个人会保留此钩子用于业务逻辑。

当我绝对需要在转换前触发一个动作时（通常是在我想触发诸如跟踪事件之类的动作时），我会使用ember-link-action插件随附的<li>关闭动作虽然看起来可能仅支持invokeAction

1.13.13

最佳做法

对于{{link-to invokeAction=(action "someAction")}}元素中的操作，您通常希望避免在非交互式元素上设置操作，因为它会为辅助技术用户带来可访问性问题（请参见no-invalid-interactive）。

但是，这并不意味着您应该通过执行链接<li>来将<li>元素变成交互式元素，因为这违反了更多的关注点（请参见no-nested-interactive）。

Answer 3

我找到了一个不涉及动作的解决方案：

<ul class="nav nav-tabs">
    {{#each tab in tabs}}
        {{#link-to tab.link id=tab.id tagName='li' }}<a>{{tab.title}}</a>{{/link-to}}
    {{/each}}
</ul>

链接到伪装成li并在其中拥有假锚的链接。

在Ember js 1.10中，有时不会触发li标签内的动作

3 个答案:

其他选项

最佳做法