Assigner la classe 'active' à l'élément de liste sélectionné dans EmberJS

Question

J'ai une liste et je voudrais définir un élément de la classe="active" automatiquement. Le suivant le code de démarrage:

<ul class="nav">
<li {{bindAttr class="atIndex:active"}}>{{#linkTo "index"}}Index{{/linkTo}}</li>
<li {{bindAttr class="atAbout:active"}}>{{#linkTo "about"}}About{{/linkTo}}</li>
<li {{bindAttr class="atLogin:active"}}>{{#linkTo "login"}}Login{{/linkTo}}</li>
</ul>

atIndex, atAbout et atLogin résider dans mon ApplicationController.

Pour le rendu:

<ul class="nav">
<li class="active"><a...>Index{{/linkTo}}</li>
<li><a...>About<a></li>
<li><a...>Login<a></li>
</ul>

Quelle est la meilleure façon de le faire avec de la Braise 1.0 pre4? Je préfère ne pas en ajouter un code spécial pour chaque vue ou de la manette.

PS - atIndex: true fonctionne, mais atIndex: function() {return true; }.property().volatile() ne le sont pas. Ce qui me fait penser que je suis en train de faire quelque chose de mal.

Merci!!!!

Answer 1

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

Answer 2

De loin la meilleure façon de résoudre ce problème est en profitant de l' linkTo aide support intégré pour le réglage de la classe active lors du rendu de liens. Autant que je sache, ce n'est pas encore documenté autres que dans le code source:

mise en œuvre: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L46

exemple: https://github.com/emberjs/ember.js/blob/master/packages/ember/tests/helpers/link_to_test.js#L120

Pour profiter de cette fonctionnalité, il suffit de régler votre css pour mettre en forme basée sur le fait d'une classe active sur le lien au lieu de l' li élément. Si vous avez vraiment besoin pour le style de l' li vous pouvez créer une vue personnalisée et l'aide qui s'étend au - Ember.LinkView et utilise un li mais le changement de css sera beaucoup plus facile.

--- Mise à JOUR ----

Depuis que nous aimons tous, twitter bootstrap juste changer le css est peut-être pas une bonne option. Dans ce cas, la suite fera l'affaire:

App.ApplicationView = Ember.View.extend({
  currentPathDidChange: function() {
    Ember.run.next( this, function() {
      this.$("ul.nav li:has(>a.active)").addClass('active');
      this.$("ul.nav li:not(:has(>a.active))").removeClass('active');
    });
  }.observes('controller.currentPath')
});

Exemple de travail à l'aide de braise linkTo helper avec bootstrap pilules: http://jsbin.com/ekobod/5/edit (nécessite de braise-1.0.0-pré.4)

Answer 3

le chemin de la route active est mis à jour automatiquement dans les ApplicationController via currentPath alors j'ai fait quelque chose comme ça dans mon application ... Dans ApplicationController ajouté propriétés telles que:

 isProductsActive: function(){
  if ( this.get('currentPath') === 'products' ) return 'active';
  else return '';
}.property('currentPath')
 

et dans mon modèle ApplicationView :

 <li {{bindAttr class="isProductsActive"}}>
  {{#linkTo "products"}}Products{{/linkTo}}
</li>
 

Answer 4

EDIT: Enfin, le meilleur moyen que j'ai trouvé pour utiliser l'activer classe de bootstrap li élément à l'aide de ember.js de le lien.

{{#linkTo "dives" tagName="li"}}
   <a {{bindAttr href="view.href"}}>Dives</a>
{{/linkTo}}

--------------8<--------------

OBSOLÈTE:

Je suppose que les réponses précédentes étaient pertinents avant Ember.js introduit le activeClass attribut pour linkTo helper. Maintenant, je voudrais résoudre le problème comme ceci :

<ul class="nav">
<li >{{#linkTo "index" activeClass="active"}}Index{{/linkTo}}</li>
<li >{{#linkTo "about" activeClass="active}}About{{/linkTo}}</li>
<li >{{#linkTo "login" activeClass="active}}Login{{/linkTo}}</li>
</ul>

Enber ajoutera automatiquement la classe, le cas échéant.

Answer 5

Si je peux suggérer une autre solution qui ne nécessite rien d'autre que des guidons:

 <li {{bind-attr class="view.innerLink.active:active"}}>
    {{#link-to "path" viewName="innerLink"}}Click{{/link-to}}
</li>
 

Cela définit l'objet LinkView tant que membre de la vue parent, attribut actif que vous pouvez ensuite référencer.