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/:

把手:

<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 存储库，它包装了这个和Ember.js 中 Bootstrap 的更多功能

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

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