Emberjs - comment marquer l'élément de menu actif en utilisant l'infrastructure du routeur

Question

Je suis en train d'essayer de créer des onglets de navigation (issus de Twitter Bootstrap) :

    Accueil
    Profil
    Messages

L'onglet actif est marqué avec class="active".

Il y a un excellent exemple de barre de navigation statique et de la fonctionnalité Router/Outlet à l'adresse http://jsfiddle.net/schawaska/pfbva/, mais je ne comprends pas comment créer une vue dynamique de barre de navigation/menu/onglet.

D'après ce que je comprends, il est possible d'utiliser des liaisons de classes dans chaque élément de menu :

 classNameBindings: ['isActive:active']

Mais où est le bon endroit pour basculer les attributs isActive ?

Answer 1

Handlebars

    {{#linkTo "index"}}Index{{/linkTo}}
    {{#linkTo "about"}}About{{/linkTo}}

Javascript

App.Router.map(function() {
    this.route("about");
});

Il ajoutera automatiquement la classe active en fonction de la route. Note : Il est testé en utilisant ember-1.0.0-pre.4.js

Answer 2

Je vois que cette question est assez ancienne, mais si vous avez mis à jour Ember.js jusqu'au RC3, vous pouvez utiliser la propriété tagName, comme ceci :

{{#link-to messages tagName="li"}}Messages{{/link-to}}

Voici l'API - http://emberjs.com/api/classes/Ember.LinkView.html

Answer 3

Vous pouvez également changer la méthode isActive de la manière suivante :

isActive: function() {
    return App.getPath('router.currentState.path') === "root.firms";
}.property("App.router.currentState"),

ou

isActive: function() {
    return this.get('controller.target.currentState.path') === "root.firms";
}.property("controller.target.currentState"),

Answer 4

Voici une solution complète fonctionnelle :

Vue :

App.NavView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
    return this.get('childViews.firstObject.active');
  }.property()
});

Modèle :

  {{#each item in controller}}
  {{#view App.NavView}}
  {{#linkTo "item" item tagName="li"}}

        {{ item.name }}

  {{/linkTo}}
  {{/view}}
  {{/each}}

Answer 5

Débutant avec la version 0.8.0 ember-bootstrap prend en charge les navs, y compris la gestion de l'état actif correctement. Et cela sans aucun type de hacks link-to/tagName :

{{#bs-nav type="pills"}}
   {{#bs-nav-item}}
      {{#link-to "foo"}}Foo{{/link-to}}
   {{/bs-nav-item}}
   {{#bs-nav-item}}
     {{#link-to "bar"}}Bar{{/link-to}}
   {{/bs-nav-item}}
 {{/bs-nav}}

Voir http://kaliber5.github.io/ember-bootstrap/api/classes/Components.Nav.html