Come si associa alla classe attiva di un collegamento utilizzando il nuovo router Ember?

Question

Sto utilizzando Twitter Bootstrap per la navigazione nella mia app Ember.js. Bootstrap utilizza una classe active nel tag li che avvolge i collegamenti di navigazione, anziché impostare la classe active sul collegamento stesso.

Il nuovo helperdi Ember.js imposta una classe active sul collegamento ma (per quanto posso vedere) non offre alcun aggancio a tale proprietà.

In questo momento, sto usando questo approccio brutta:

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

Questo stamperà:

<li class="active" href="/inbox"><a href="/inbox">Inbox</a></li> 

Che è quello che voglio, ma non è valido HTML.

Ho anche provato ad associare la proprietà active di LinkView generata dalla vista genitore, ma se si esegue questa operazione, la vista genitore verrà sottoposta a rendering due volte prima che venga inserita e che generi un errore.

Oltre a ricreare manualmente la logica utilizzata internamente dall'assistente linkTo per assegnare la classe active al collegamento, esiste un modo migliore per ottenere questo effetto?

Answer 1

È inoltre possibile utilizzare nidificato Link-to:

{{#link-to "ccprPracticeSession.info" controller.controllers.ccprPatient.content content tagName='li' href=false eventName='dummy'}} 
    {{#link-to "ccprPracticeSession.info" controller.controllers.ccprPatient.content content}}Info{{/link-to}} 
{{/link-to}} 

Answer 2

Abbiamo sicuramente bisogno di una soluzione pubblica più permanente, ma qualcosa del genere dovrebbe funzionare per ora.

Il modello:

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

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

La definizione della vista:

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

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

Questo si basa su un paio di vincoli:

• La vista nav contiene una vista singola, bambino statica
• È possibile utilizzare una vista per il proprio <li> s. C'è un sacco di dettagli in the docs su come personalizzare l'elemento di una vista dalla sua definizione JavaScript o da Handlebars.

Ho fornito a live JSBin di questo funzionamento.

Answer 3

Ho ricreato la logica utilizzata internamente. Gli altri metodi sembravano più hackerati. Ciò renderà anche più facile riutilizzare la logica altrove, altrimenti non avrei bisogno di routing.

Utilizzato in questo modo.

{{#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); 
    } 
}); 

Answer 4

Sulla risposta Katz', si può avere la proprietà active essere ricalcolata quando si fa clic dell'elemento nav parentView.

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

Answer 5

Per lo stesso problema qui sono venuto con una soluzione a base di jQuery non è sicuro su riduzioni di prestazioni, ma si sta lavorando fuori dalla scatola. Riapre Ember.LinkView e lo estendono.

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

Answer 6

Si può saltare l'estensione di una vista e utilizzare il seguente.

{{#linkTo "index" tagName="li"}}<a>Homes</a>{{/linkTo}} 

Anche senza un href Ember.JS saprà comunque come agganciare agli elementi LI.

Answer 7

ho appena scritto un componente per rendere questo un po 'più bello:

App.LinkLiComponent = Em.Component.extend({ 
    tagName: 'li', 
    classNameBindings: ['active'], 
    active: function() { 
    return this.get('childViews').anyBy('active'); 
    }.property('childViews.@each.active') 
}); 

Em.Handlebars.helper('link-li', App.LinkLiComponent); 

Usage:

{{#link-li}} 
    {{#link-to "someRoute"}}Click Me{{/link-to}} 
{{/link-li}} 

Answer 8

risposte correnti al momento della scrittura sono datati. Nelle versioni successive di Ember, se si utilizza {{link-to}}, viene automaticamente impostata la classe 'active' sull'elemento <a> quando la rotta corrente corrisponde al collegamento di destinazione.

Quindi basta scrivere il tuo css con l'aspettativa che il avrà active e dovrebbe farlo immediatamente.

Fortunato quella funzione è stata aggiunta. Tutto ciò che è stato necessario per risolvere questo "problema" è abbastanza ridicolo.

Answer 9

Beh ho preso quello che @alexspeller grande idea e convertito a Ember-cli:

app/componenti/Link-li.js

export default Em.Component.extend({ 
    tagName: 'li', 
    classNameBindings: ['active'], 
    active: function() { 
     return this.get('childViews').anyBy('active'); 
    }.property('childViews.@each.active') 
}); 

Nella mia barra di navigazione ho:

{{#link-li}} 
    {{#link-to "squares.index"}}Squares{{/link-to}} 
{{/link-li}} 
{{#link-li}} 
    {{#link-to "games.index"}}Games{{/link-to}} 
{{/link-li}} 
{{#link-li}} 
    {{#link-to "about"}}About{{/link-to}} 
{{/link-li}}