如何使用新的 Ember 路由器绑定到链接的活动类? [英] How do I bind to the active class of a link using the new Ember router?

问题描述

我在 Ember.js 应用程序中使用 Twitter Bootstrap 进行导航.Bootstrap 在包装导航链接的 li 标签上使用 active 类，而不是在链接本身上设置 active 类.

I'm using Twitter Bootstrap for navigation in my Ember.js app. Bootstrap uses an active class on the li tag that wraps navigation links, rather than setting the active class on the link itself.

Ember.js 的新 linkTo 助手将在链接上设置一个 active 类，但(据我所知)不提供任何挂钩财产.

Ember.js's new linkTo helper will set an active class on the link but (as far as I can see) doesn't offer any to hook on to that property.

现在，我正在使用这种丑陋的方法:

Right now, I'm using this ugly approach:

{{#linkTo "inbox" tagName="li"}}
  <a {{bindAttr href="view.href"}}>Inbox</a>
{{/linkTo}}

这将输出:

<li class="active" href="/inbox"><a href="/inbox">Inbox</a></li>

这是我想要的，但不是有效的 HTML.

Which is what I want, but is not valid HTML.

我还尝试从父视图绑定到生成的 LinkView 的 active 属性，但如果这样做，父视图将在插入之前呈现两次，从而触发错误.

I also tried binding to the generated LinkView's active property from the parent view, but if you do that, the parent view will be rendered twice before it is inserted which triggers an error.

除了手动重新创建linkTo helper 内部使用的逻辑，将active 类分配给链接，有没有更好的方法来实现这种效果?>

Apart from manually recreating the logic used internally by the linkTo helper to assign the active class to the link, is there a better way to achieve this effect?

推荐答案

您也可以使用嵌套链接:

You can also use nested link-to's:

{{#link-to "ccprPracticeSession.info" controller.controllers.ccprPatient.content content tagName='li' href=false eventName='dummy'}}
  {{#link-to "ccprPracticeSession.info" controller.controllers.ccprPatient.content content}}Info{{/link-to}}
{{/link-to}}

这篇关于如何使用新的 Ember 路由器绑定到链接的活动类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！