emberjs - 如何使用路由器基础设施标记活动菜单项 [英] emberjs - how to mark active menu item using router infrastructure

问题描述

我正在尝试创建导航标签（取自 Twitter Bootstrap ）：

I'm trying to create navigation tabs (taken from 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/ ，但
我不明白如何创建动态导航栏/菜单/选项卡视图。

There is great example of static navbar and Router/Outlet feature at http://jsfiddle.net/schawaska/pfbva/, but I can't understand how to create a dynamic navbar/menu/tab view.

据了解，可以在每个菜单项中使用类绑定：

As far as I understand, it is possible to use class bindings in each menu item:

 classNameBindings: ['isActive:active']

但是在哪里可以切换isActive属性？

But where is the right place to switch isActive attributes ?

推荐答案

如果您使用Ember> = 1.11，那么 https://stackoverflow.com/a/14501021/65542 是正确答案。

If you're using Ember >= 1.11, then https://stackoverflow.com/a/14501021/65542 below is the correct answer.

我将创建一个 NavigationView ，请参阅 http://jsfiddle.net/pangratz666/z8ssG/ ：

I would create a NavigationView, see http://jsfiddle.net/pangratz666/z8ssG/:

Handlebars ：

<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'）设置当前导航项目; ...

And inside your route's connectOutlets you have to set the current navigation item via router.set('navigationController.selected', 'home'); ...

还可以查看 ember-bootstrap 存储库，它将Bootstrap的此功能和更多功能包含在Ember.js

Also take a look at the ember-bootstrap repository, which wraps this and more features of Bootstrap inside Ember.js

这篇关于emberjs - 如何使用路由器基础设施标记活动菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！