Question

我有一个带有bootstrap菜单栏的ember应用程序。默认情况下，主页按钮呈现为活动选项并且为蓝色。如何根据选择的链接更改活动选项？

<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
      <li class="active">
      <a href="#"{{#link-to "index"}}<span class="glyphicon glyphicon-home"></span> &nbsp &nbsp Home {{/link-to}}</a>
      </li>    
      <li>
      <a href="#"{{#link-to "settings"}}<span class="glyphicon glyphicon-wrench"></span> &nbsp &nbsp Settings {{/link-to}}</a>
      </li>
      <li>
      <a href="#"<span class="glyphicon glyphicon-arrow-right"></span>  Logout</a>
      </li>
</ul>

编辑：根据http://emberjs.com/guides/routing/defining-your-routes/，link-to助手应该自动处理此事

编辑：我尝试过以下方法 -

<ul class="nav">
    {{#linkTo 'index' tagName="li"}}Home{{/linkTo}}
    {{#linkTo 'settings' tagName="li"}}Settings{{/linkTo}}
  </ul>

因为根据上面的ember页面链接，tagName属性负责分配活动类，但它对我不起作用。

Answer 1

解决方案实际上很简单。只需将您常用的链接包装到另一个链接到tagName =“li”。

<ul class="nav">
    {{#link-to 'index' tagName="li"}}
        {{#link-to 'index'}}
            Home
        {{/link-to}}
    {{/link-to}}
    {{#link-to 'settings' tagName="li"}}
        {{#link-to 'settings'}}
            Settings
        {{/link-to}}
    {{/link-to}}
</ul>

Answer 2

link-to默认创建<a>元素，并在当前路由与链接的目标路由匹配时设置类active。引导程序期望active标记中存在li类。内部有一个<a>元素。

因此，您需要使用{{#link-to ... tagName="li"}}，就像您的第二个方法和<a>元素一样。否则，不会应用样式。

像这样：

<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
  {{#link-to "index" tagName="li"}}
    <a href="#"><span class="glyphicon glyphicon-home"></span> &nbsp &nbsp Home</a>
  {{/link-to}}      
  {{#link-to "settings" tagName="li"}}
    <a href="#"><span class="glyphicon glyphicon-wrench"></span> &nbsp &nbsp Settings</a>
  {{/link-to}}
  {{#link-to "logout" tagName="li"}}
    <a href="#"><span class="glyphicon glyphicon-arrow-right"></span>  Logout</a>
  {{/link-to}}
</ul>

在行动http://jsfiddle.net/marciojunior/E63Hy/

中查看此内容

唯一的缺点是你的href与目标路线不匹配，它与href="#"固定。因为当link-to tagName与a不同时，不会生成href。所以即使<a href="{{href}}">也行不通。当然，这只是视觉效果，点击链接将转换到目标路线，并相应地更新网址。

Answer 3

实际上看到耶胡达的答案，

How do I bind to the active class of a link using the new Ember router?

Answer 4

我刚刚编写了一个组件，以使其更好一些：

App.LinkLiComponent = Em.Component.extend
  tagName:            'li'
  classNameBindings:  ['active']
  active:             (->
    @get('childViews').anyBy 'active'
  ).property 'childViews.@each.active'

Em.Handlebars.helper 'link-li', App.LinkLiComponent

用法：

{{#link-li}}
  {{#link-to "someRoute"}}Click Me{{/link-to}}
{{/link-li}}

如何在ember.js中设置活动的菜单栏项

4 个答案: