Wie strukturiere ich eine Multi-Record Ember App mit benannten Outlets?

Question

Ich versuche eine Tweetdeck-ähnliche Benutzeroberfläche zu erstellen, um Elemente aus einer zentralen Bibliothek in Kategorien anzuordnen. Ich brauche wirklich Hilfe, um meinen Kopf um die kanonische Art der Verwendung von Embers Router zu wickeln.

Im Wesentlichen habe ich eine Suchoberfläche, die es dem Benutzer erlaubt, null oder mehr Kategorien gleichzeitig zu öffnen. Die Kategorien zeigen eine Liste von Elementen, die der Benutzer aus einer zentralen Bibliothek auf der rechten Seite hinzufügen kann. Durch komplett Ignorieren des Routers und der URL, habe ich es geschafft, einen semi-funktionierenden Proof of Concept zu hacken. Jetzt möchte ich zurückgehen und versuchen, es auf die Ember Art zu machen. Im Folgenden finden Sie eine hohe Skizze von dem, was ich zu tun versuche:

Wenn ich richtig verstehe, eine durch Kommata getrennte Liste von Modell IDs das gewünschte URL-Schema wäre, die gerade geöffnet ist. Ich habe eine gute Idee, wie ich das von einer anderen Frage aus angehen könnte, How to design a router so URLs can load multiple models?.

Leider gibt es ein paar Konzepte, die ich nicht verstehe:

• Wie konstruiere ich meine Vorlagen und Router, so dass die Bibliothek mit einem eigenen Modell und Controller angezeigt wird? Ich nehme an, ein Name {{outlet}} ist der Weg zu gehen, aber ich bin völlig verloren, wenn es um die renderTemplate Konfiguration kommt. Oder sollte ich stattdessen {{render}} verwenden? In beiden Fällen verstehe ich die Rolle des Routers in dieser Situation nicht.

EDIT 28.01: Ich habe eine updated fiddle hinzugefügt, die eine eigenständigelibrary route/Vorlage und Dokumente meine Versuche, enthält es in die categories Vorlage zu machen. Wie erwartet Ember, dass ich der Bibliotheksvorlage ihr Modell gebe, wenn ich versuche, sie in eine andere Route einzubetten? Ich habe sowohl {{outlet}} mit renderTemplate und {{render}} versucht, aber in beiden Fällen bin ich fest, wenn es um die Angabe des Modells kommt.

Mit renderTemplate:

App.CategoriesRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('categories'); 
     this.render("library", { 
      into: "categories", 
      outlet: "library", 
      controller: "library", 
     }); 
    }, 
}); 

• Wenn mein Controller eine Anforderung empfängt, eine Kategorie zu öffnen, wie kommuniziere ich, dass mit dem Router? Wie wird der Hash-Pfad aktualisiert? Wer ist verantwortlich für das Laden der entsprechenden Modelle? Ich nehme an, ich sollte mit transitionTo oder transitionToRoute beginnen, aber ich verstehe auch nicht die Rolle des Routers hier. Spezifische Fragen:

  1. Wie demiserialisiere ich mehrere, durch Komma getrennte Modelle von der URL? Trenne ich einfach das Komma oder gibt es einen besseren Weg?

  2. Sobald ich die IDs von der URL bekomme, wie kann ich meinen Modell Hook mehrere Datensätze zurückgeben? Schiebe ich sie alle in ein Ember-Array?

  3. Wenn der Controller die ID eines neuen zu öffnenden Datensatzes erhält, wie kommuniziere ich das mit dem Router?

Ich habe versucht, das alleine zu arbeiten, und haben die Ember Dokumentation viele Male gelesen, aber ich fürchte, es ist einfach über den Kopf ist. Ich habe eine minimal (currently non-functional) fiddle, um meine Gedanken zu darlegen und zeigen, wo ich stecken bin. Ich würde jede Hilfe schätzen, die jemand anbieten könnte.

Answer 1

You could also try something like this from this link.

 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return Ember.RSVP.hash({ 
     books: this.store.findAll('book'), 
     genres: this.store.findAll('genre') 
    }); 
    }, 
    setupController: function(controller, model) { 
    controller.set('books', model.books); 
    controller.set('genres', model.genres); 
    } 
}); 

Hier laden sie mehrere Modelle in einer Strecke Ember.RSVP.hash und anschließend setupController mit SET sie jedes Modell (Rails: Instanzvariable) einzeln.

Ich gehe davon aus, dass Sie mit dieser Methode so viele Modelle laden können, wie Sie benötigen.

Answer 2

this.render keinen Modellparameter akzeptiert, aber man konnte das Modell durch die Controller-Eigenschaft stattdessen passieren, das macht Sinn zu tun, da der Controller auf jedem Fall wirklich ein Proxy für das Modell ist

App.IndexRoute = Ember.Route.extend({ 
    var self = this, 
     notesController = self.controllerFor('notes').set('content', self.store.find('notes')); 

    renderTemplate: function() { 
     this.render('notes', { 
      controller: notesController, 
      into: 'index', 
      outlet: 'notes' 
     });  
    } 
});