Emberjs: Funktionsprototyp in Hash

Question

Ich habe eine vier vertikale Panels UI:

• Das erste Feld zeigt das Menü an und ermöglicht die Auswahl der Daten, die Sie anzeigen möchten
• Mit dem zweiten Panel können Sie einen Filter aus einer Liste vordefinierter Filter auswählen
• Mit dem dritten Panel können Sie die Ergebnisliste des Filters sehen
• Mit dem Forth -Panel können Sie die Details eines bestimmten Elements anzeigen

Für diese Benutzeroberfläche verwende ich verschachtelte Routen und Verkaufsstellen:

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

Alles funktioniert gut, aber wenn ich die Details eines bestimmten Elements (die letzte Route in meinen verschachtelten Strecken) zeige, ist der Hash in URL nicht korrekt.

• Erste Route OK: #/Kunden
• Zweite Route ok: #/customer/all
• Dritte Route KO: #/customer/Funktion filter () {[nativer Code]}/show/2

Ich habe ein Beispiel auf JSBIN gebe: http://jsbin.com/inagavo/1

Was mache ich falsch ? Vielen Dank

Answer 1

Das Problem ist, dass Ember die URL basierend auf den Modellen für jede Route aufbaut. Wenn es versucht, die Route unterhalb der aktiven/alle Route aufzubauen, wird Ihr Array von Elementen verwendet (das kein Feld auf dem als Filter bezeichneten Feld hat), sodass nicht feststellt Modell. Eine gute Praxis besteht darin, dass Ihr Schnecken (der Wert im Pfad) mit der Eigenschaft des Modells übereinstimmt.

Wenn es nicht übereinstimmt, können Sie die Serialize -Methode auf der Route überschreiben, sodass Ember weiß, wie Sie Ihr Modell für die URL serialisieren.

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