How to structure a multi-record Ember app with named outlets?

Question

I'm trying to build a Tweetdeck-like UI to arrange items from a central library into categories. I really need help wrapping my head around the canonical way of using Ember's router.

Essentially, I have a search UI, which allows the user to open zero or more categories simultaneously. The categories show a list of items, which the user can add to from a central library on the right. By completely ignoring the router and the URL, I have managed to hack together a semi-working proof of concept. Now I want to go back and try to do it the Ember way. Below is a high level sketch of what I am trying to accomplish:

If I understand correctly, the desired URL scheme would be a comma-separate list of model IDs that are currently open. I got a good idea of how to approach that from another question, How to design a router so URLs can load multiple models?.

Unfortunately, there are a few concepts I do not understand:

• How do I construct my templates and router, such that the library is displayed with its own model and controller? I assume a named {{outlet}} is the way to go, but I am completely lost when it comes to the renderTemplate configuration. Or perhaps I should use {{render}} instead? In either case, I do not understand the router's role in this situation.

EDIT 1/28: I've added an updated fiddle that includes a standalone library route/template and documents my attempts to render it into the categories template. How does Ember expect me to give the library template its model when I try to embed it into another route? I've tried both {{outlet}} with renderTemplate and {{render}}, but in both cases, I am stuck when it comes to specifying the model.

Using renderTemplate:

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

• When my controller receives a request to open a category, how do I communicate that to the router? How is the hash path updated? Who is responsible for loading the appropriate model(s)? I assume I should start with transitionTo or transitionToRoute, but I do not understand the router's role here either. Specific questions:

  1. How do I de-serialize multiple, comma-separated models from the URL? Do I just split on the comma or is there a better way?

  2. Once I get the IDs from the URL, how do I make my model hook return multiple records? Do I just shove them all into an Ember array?

  3. When the controller gets the ID of a new record to open, how do I communicate that to the router?

I've tried to work this out on my own and have read the Ember documentation many times, but I am afraid it is simply over my head. I put together a minimal (currently non-functional) fiddle to outline my thoughts and point out where I am stuck. I would appreciate any help anyone could offer.

Answer 1

this.render does not accept a model parameter, but you could pass the model through the controller property instead, this makes sense to do since the Controller is really a proxy for the model at any rate

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

Answer 2

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

Here, they load multiple models into one route using Ember.RSVP.hash and then using setupController they set each model (Rails: instance variable?) individually.

I'm assuming using this method that you could load as many models as you needed.