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

Ember 1.11+ :

{{#link-to "dashboard" tagName="li"}}
  Tableau de bord
{{/link-to}}

Ember < 1.11 (bind-attr requis) :

{{#link-to "dashboard" tagName="li"}}
  Tableau de bord
{{/link-to}}

Answer 2

Si vous utilisez Ember >= 1.11, alors https://stackoverflow.com/a/14501021/65542 ci-dessous est la bonne réponse.

---

Je créerais un NavigationView, voir http://jsfiddle.net/pangratz666/z8ssG/:

Handlebars:

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

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()
    })
});

Et à l'intérieur de votre route connectOutlets, vous devez définir l'élément de navigation actuel via router.set('navigationController.selected', 'home'); ...

---

Jetez également un œil au référentiel ember-bootstrap, qui enveloppe cela et d'autres fonctionnalités de Bootstrap à l'intérieur d'Ember.js

Answer 3

Certaines des suggestions ci-dessus restent valables pour le cas de bootstrap twitter. Vous pouvez également essayer quelque chose comme ceci

{{#link-to 'tableau de bord' tagName='li'}} 
  {{#link-to 'tableau de bord'}}Titre du lien{{/link-to}}
{{/link-to}}

1. Le link-to avec le tagName li applique la classe active au li
2. Le link-to interne serait un élément ancre qui vous donne la fonctionnalité Ouvrir dans un nouvel onglet lorsque vous cliquez avec le bouton droit

Answer 4

Récemment, un addon Ember-cli est disponible pour faire exactement cela. Il s'appelle ember-cli-active-link-wrapper.

Installation : ember install ember-cli-active-link-wrapper

Vous pouvez l'utiliser comme ceci :

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

ce qui donne :

    Index

Answer 5

Je sais que c'est un ancien poste, mais voici les mises à jour pour Ember 2.4.0

Pour créer des liens, vous pouvez écrire

{{#link-to 'photoGallery'}}
  Superbes photos de hamsters
{{/link-to}}

ou

{{link-to 'Superbes photos de hamsters' 'photoGallery'}}

Ember définira automatiquement la classe active lorsque la route actuelle correspond à la route du lien (dans cet exemple photoGallery).

Si vous souhaitez contrôler la classe 'active' sur d'autres routes également, vous pouvez le faire en définissant l'attribut current-when.

{{#link-to 'photoGallery' current-when='photoGallery photoPreview'}}
  Superbes photos de hamsters
{{/link-to}}

Ce lien aura la classe active sur les routes photoGallery et photoPreview.

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