Emberjs: prototipo di funzione in hash

Question

Ho quattro pannelli verticali UI:

• Il primo pannello mostra il menu e consente di scegliere i dati che si desidera visualizzare
• Il secondo pannello consente di selezionare un filtro da un elenco di filtri predefiniti
• Il terzo pannello ti consente di vedere l'elenco dei risultati del filtro
• Il Forth Panel ti consente di visualizzare i dettagli di un articolo specifico

Per questa interfaccia utente, utilizzo percorsi e punti vendita nidificati:

App.Router.map(function() {
    this.resource('customers', { 'path' : '/customers' }, function() {
        this.resource('customers_filters', { 'path' : '/:filter' }, function() {
            this.resource('customer', { 'path' : '/show/:customer_id' });
        });
    });
});

Tutto funziona bene ma quando mostro i dettagli di un articolo specifico (l'ultimo percorso nelle mie rotte nidificate), l'hash nell'URL non è corretto.

• Primo percorso OK: #/clienti
• Seconda rotta OK: #/clienti/tutti
• Terza Route KO: #/Clienti/Function Filter () {[codice nativo]}/show/2

Ho dato un esempio su jsbin: http://jsbin.com/inagavo/1

Che cosa sto facendo di sbagliato ? Grazie

Answer 1

Il problema è che Ember crea l'URL in base ai modelli per ogni percorso. Quando cerca di costruire il percorso al di sotto del percorso attivo/tutto utilizza la matrice di articoli (che non ha un campo su di esso chiamato filtro) in modo che non sappia come determinare se attualmente ha All/Filter modello. Una buona pratica è che la tua lumaca (il valore: nel percorso) corrisponda alla proprietà sul modello.

Se non corrisponde puoi sovrascrivere il metodo serializzante sul percorso, quindi Ember sa come serializzare il tuo modello per l'URL.

App.CustomersFiltersRoute = Ember.Route.extend({
  model: function(params) {

    if(params.filter == "active") {
      return _.where(App.Customers, {isActive: true});
    }

    return App.Customers;
  },

  serialize: function(model){
    if(model === App.Customers){
      return {filter:'all'}; 
    }
    return {filter:'active'};
  }
});

http://jsbin.com/inagavo/6/edit