2

I'm wondering what the best way is to handle a list of items and displaying an item detail when a user clicks/selects one of the items. An example of this would be showing a list of email messages in the left sidebar and showing the message details in the main content area when a user clicks on one of the messages.

Using @pangrantz's great answer on how to mark active menu item using router infrastructure I was able to come up with a working example: jsFiddle

But there are a couple things that don't seem quite right:

First, in #connectOutlets in the Router's show state, I'm setting the selected message on the controller as well as connecting the outlet with the same object. I would think I could do one or the other.

connectOutlets: function(router, context) {
    router.set('messagesController.selected', context);
    router.get('applicationController').connectOutlet('message-details', 'messageDetails', context);
}

Second, I'm transitioning to the same state from both the index and show states. I'm not even sure I want to be transitioning to a new state - I just want to hook up the outlet.

showDetails: Ember.Route.transitionTo('show')

Is there anything I can change to make this code more idiomatic? Thanks!

Community
  • 1
  • 1
Chris Conley
  • 1,062
  • 10
  • 13

1 Answers1

0

This code looks pretty idiomatic to my eyes. You are right, you do not need to set the selected message. When you connect the outlet for message details it will set the selected message as content on the message details controller.

You should IMO be transitioning from a index to a show state as this is good RESTful practice and also allows users to bookmark individual messages. I would make the URL to the index state be '/messages' rather than '/'.

buuda
  • 1,427
  • 7
  • 8