Comment puis-je lier à la classe active d'un lien à l'aide de la nouvelle Braise routeur?

Nous avons certainement besoin de plus de public, solution permanente, mais quelque chose comme cela devrait fonctionner pour l'instant.

Le modèle:

<ul>
{{#view App.NavView}}
  {{#linkTo "about"}}About{{/linkTo}}
{{/view}}

{{#view App.NavView}}
  {{#linkTo "contacts"}}Contacts{{/linkTo}}
{{/view}}
</ul>

La définition de la vue:

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

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

Cela repose sur un couple de contraintes:

• La valeur liquidative de la vue contient un unique, statique enfant de voir
• Vous êtes en mesure d'utiliser un affichage pour votre <li>s. Il y a beaucoup de détails dans les docs sur la façon de personnaliser une vue de l'élément à partir de son JavaScript définition ou de Guidon.

Que j'ai fourni un live JSBin de ce travail.

Bâtiment sur katz réponse, vous pouvez avoir la active bien être recalculées lorsque la valeur liquidative de l'élément parentView est cliqué.

App.NavView = Em.View.extend({

    tagName: 'li',
    classNameBindings: 'active'.w(),

    didInsertElement: function () {
        this._super();
        var _this = this;
        this.get('parentView').on('click', function () {
            _this.notifyPropertyChange('active');
        });
    },

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

J'ai recréé la logique utilisée en interne. Les autres méthodes semblait plus hackish. Cela permettra également de faciliter la réutilisation la logique d'ailleurs je ne pourrais pas besoin de routage.

Utilisé comme cela.

{{#view App.LinkView route="app.route" content="item"}}{{item.name}}{{/view}}

App.LinkView = Ember.View.extend({
    tagName: 'li',
    classNameBindings: ['active'],
    active: Ember.computed(function() {
      var router = this.get('router'),
      route = this.get('route'),
      model = this.get('content');
      params = [route];

      if(model){
        params.push(model);
      }

      return router.isActive.apply(router, params);
    }).property('router.url'),
    router: Ember.computed(function() {
      return this.get('controller').container.lookup('router:main');
    }),
    click: function(){
        var router = this.get('router'),
        route = this.get('route'),
        model = this.get('content');
        params = [route];

        if(model){
            params.push(model);
        }

        router.transitionTo.apply(router,params);
    }
});

Pour le même problème ici, je suis venu avec jQuery solution basée sur le doute sur les performances de pénalités, mais il fonctionne hors de la boîte. Je vais rouvrir la Braise.LinkView et étendu.

Ember.LinkView.reopen({
    didInsertElement: function(){
        var el = this.$();

        if(el.hasClass('active')){
            el.parent().addClass('active');
        }

        el.click(function(e){
            el.parent().addClass('active').siblings().removeClass('active');
        });
    }
});