emberjs - 如何使用路由器基础设施标记活动菜单项

Question

我正在尝试创建导航标签(取自Twitter Bootstrap):

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

活动选项卡标有class="active".

http://jsfiddle.net/schawaska/pfbva/上有静态导航栏和路由器/插座功能的很好的例子,但我无法理解如何创建动态导航栏/菜单/选项卡视图.

据我了解,可以在每个菜单项中使用类绑定:

 classNameBindings: ['isActive:active']

但是在哪里切换isActive属性的正确位置？

Answer 1

Ember 1.11+:

{{#link-to "dashboard" tagName="li"}}
  <a href="{{view.href}}">Dashboard</a>
{{/link-to}}

Ember <1.11(bind-attr必填):

{{#link-to "dashboard" tagName="li"}}
  <a {{bind-attr href="view.href"}}>Dashboard</a>
{{/link-to}}

Answer 2

如果您使用Ember> = 1.11,则下面的/sf/answers/1015071501/是正确的答案.

我会创建一个NavigationView,请参阅http://jsfiddle.net/pangratz666/z8ssG/:

把手:

<script type="text/x-handlebars" data-template-name="navigation">
    <ul class="nav nav-tabs">
        {{#view view.NavItemView item="home" }}
            <a {{action gotoHome}} >Home</a>
        {{/view}}
        {{#view view.NavItemView item="profiles" }}
            <a {{action gotoProfiles}} >Profiles</a>
        {{/view}}
        {{#view view.NavItemView item="messages" }}
            <a {{action gotoMessages}} >Messages</a>
        {{/view}}        
    </ul>
</script>

JavaScript:

App.NavigationView = Em.View.extend({
    templateName: 'navigation',
    selectedBinding: 'controller.selected',
    NavItemView: Ember.View.extend({
        tagName: 'li',
        classNameBindings: 'isActive:active'.w(),
        isActive: function() {
            return this.get('item') === this.get('parentView.selected');
        }.property('item', 'parentView.selected').cacheable()
    })
});

在您的路线内,您connectOutlets必须通过router.set('navigationController.selected', 'home');... 设置当前导航项目

另外看一下ember-bootstrap存储库,它将这个以及Bootstrap的更多功能包装在Ember.js中

Answer 3

上述一些建议对于twitter bootstrap案例仍然有效.你也可以试试这样的东西

{{#link-to 'dashboard' tagName='li'}} 
  {{#link-to 'dashboard'}}Link Title{{/link-to}}
{{/link-to}}

1. 在link-to与li标记名的活动类适用于丽
2. 内部link-to将是一个在右键单击时anchor为您提供Open in New Tab功能的元素

Answer 4

最近有一个Ember-cli插件可以做到这一点.它被称为ember-cli-active-link-wrapper.

安装: ember install ember-cli-active-link-wrapper

你可以像这样使用它:

{{#active-link}}
  {{link-to "Index" "index"}}
{{/active-link}}

这导致:

<li class='active'>
    <a href="/" class='active'>Index</a>
</li>

Answer 5

我知道这是旧帖子,但这里是Ember 2.4.0的更新

要创建链接,您可以编写

{{#link-to 'photoGallery'}}
  Great Hamster Photos
{{/link-to}}

要么

{{link-to 'Great Hamster Photos' 'photoGallery'}}

当前路线与链路的路线匹配时,Ember会自动将类设置为活动(在本例中photoGallery).

如果你想在其他路线上控制'active'类,你可以通过设置current-when属性来实现.

{{#link-to 'photoGallery' current-when='photoGallery photoPreview'}}
  Great Hamster Photos
{{/link-to}}

此链接将active在两个路由photoGallery和photoPreview路由上都有类.

https://github.com/emberjs/ember.js/blob/v2.4.0/packages/ember-routing-views/lib/components/link-to.js#L140