Question

I am playing with an Ember-data backed Ember app. The domain language is a bit specific so i will use the terms Gallery and Image for the models. These two are associated: Gallery has many Images.

When I route to a Gallery, The outlet is populated with the galleryView which renders all the images as thumbnails. It also has an outlet where the “selected” image appears full size. This al works great using nested routes.

The crux for me is that I want the index route for a Gallery to show the first image in the gallery by default. I have found this a little tricky to implement.

At routing time the Gallery may not have been fetched from the backend yet. This causes no problems for the gallery itself but I have not managed to make a reference to the yet to be loaded associated Image of the yet to be loaded Gallery.

    connectOutlets: function(router) {
      var controller = router.get('galleryController');
      var context = controller.get('defaultImage');
      controller.connectOutlet('image', context);
    }

defaultImage is where I have been trying to reference an Image I don’t yet know the ID of or have a real reference to. I have so far not bee able to return something form that method that would actually update the view when the data is loaded.

I’ll embarrass myself and show that method too… even though it does not work at all right now.

defaultImage: Ember.computed(function() {
  var image = Ember.Object.create({
    isLoaded: false
  });
  if (this.get('content.isLoaded')) {
    var images = this.get('content.images');
    image = images.objectAt(0);
  }
  return image;
}).property('content.isLoaded')

So, it is listening to the content of the GalleryController and trying to return either an empty object or supposedly the “first” Image in the results.

Should I possibly not even try anything even like that and instead trigger a transition once the gallery is loaded? If so, Id love a hint about where to trigger that transition “safely”. It should only trigger if the gallery index state is reached and not every time a gallery is loaded for example.

I’ll stop rambling now. Please ask me to clarify any part of my question and I’ll update it.

Answer 1

Assuming that you have one GalleryController and one SelectedImageController you can connect the two using connectControllers. Something like:

App.GalleryController = Ember.ArrayController.extend({
    content: [],
    selectedImage: null
    // other stuff
});

App.ImageController = Ember.Controller.extend({
    contentBinding: 'galleryController.selectedImage',
    galleryController: null,
    // other stuff
});

then in your connectOutlets:

connectOutlets: function(router) {
    //your other outlets, data fetching etc
    router.get('imageController').connectControllers('gallery');
}

Now, since the two controllers are bound, you only need to set the App.GalleryController.selectedImage property to the first item in the list. This can be done when App.GalleryController.content is updated.