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

问题描述

我在我的Ember.js应用程序中使用Twitter Bootstrap导航。 Bootstrap在包含导航链接的 li 标签上使用活动 c>类，而不是设置

Ember.js的新的 linkTo 帮助器将设置链接上的活动类，但（尽可能看到）不提供任何挂钩到该属性。

现在，我使用这个丑陋的方法：

  {{linkToinboxtagName = li}} 
< a {{bindAttr href =view.href}}>收件箱< / a> 
 {{/ linkTo}} 
  

这将输出：

 < li class =activehref =/ inbox>< a href =/ inbox> Inbox< / a>< ; /立GT; 
  

我想要什么，但HTML无效。

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

除了手动重新创建由 linkTo 帮助者内部使用的逻辑， code> active 类链接，有没有更好的方法来实现这个效果？

解决方案

您还可以使用嵌套的链接到：

  {{link-toccprPracticeSession.infocontroller.controllers .ccprPatient.content content tagName ='li'href = false eventName ='dummy'}} 
 {{＃link-toccprPracticeSession.infocontroller.controllers.ccprPatient.content content}} Info {{/ link -to}} 
 {{/ link-to}} 
  

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'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}}

This will output:

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

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

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.

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屋！