Ember.js: back button does not update index when using nested routes

Question

http://jsfiddle.net/bugsinamber/xjvYk/6/

Customization

I have an index list with a list of stories. This is displayed in the application. When I click on each story, the plot is viewed in the same outlet (replacing the index view). I use nested routes.

Question

When I click "all stories" to return to the index view from the plot, it works great. But if you press the browser button back to return to the index view, the path will change to "/ stories" correctly, and still the index view will not be displayed. I have to click the back button again to display the index.

Template

<script type="text/x-handlebars" data-template-name="application"> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="stories"> <p>Stories Index Page</p> {{#each story in controller}} {{#linkTo "story"}} {{story.title}} {{/linkTo}} {{/each}} </script> <script type="text/x-handlebars" data-template-name="story"> {{#linkTo "index"}}Back to all stories{{/linkTo}} {{title}} <p>Story test page</p> </script> 

.Js application

 App = Ember.Application.create({}); App.Router.map(function() { this.resource("stories", function() { this.resource("story", {path: ':story_id'}); }); }); App.StoriesRoute = Ember.Route.extend({ model: function() { return App.Story.find(); } }); App.StoryRoute = Ember.Route.extend({ model: function(params) { return App.Story.find(params.story_id); }, renderTemplate: function() { this.render('story', { // the template to render into: 'application' // the template to render into }); } }); App.IndexRoute = Ember.Route.extend({ redirect: function() { this.transitionTo('stories'); } }); 

What I know so far

This works correctly if I do not use nested routes. Apparently, I should not use nested routes if I don't lose my gaze, but this limits the design needs. Logically, in this case, I should be allowed to use nested routes.

I impose routes because I need to access the “stories” from the event manager, as shown below. If I do not create routes, then when I first load the history view (without loading the index view yet), then the "messages" do not return anything.

 App.StoryController = Ember.ObjectController.extend({ needs: "stories", previousPost: function() { return this.advancePost(1); }, nextPost: function() { return this.advancePost(-1); }, advancePost: function(delta) { var index, length, posts; posts = this.get('controllers.stories'); length = posts.get('length'); index = (posts.indexOf(this.get('content')) + delta + length) % length; if (index >= 0 && index < length) { return this.transitionToRoute('story', posts.objectAt(index)); } } }); 

Thanks in advance.

Answer 1

Your routes should be nested according to your user interface. stories and story not nested, so just:

 App.Router.map(function() { this.resource("stories"); this.resource("story", { path: ':story_id' }); }); 

If you want the story URL to include stories , you can do:

  this.resource("story", { path: 'stories/:story_id' }); 

Then you want to access all the stories in the App.StoryController . This does not mean that it should be nested in the stories resource or you need to use the App.StoriesController .

You want to access the data, so get the data and set it in App.StoryController :

 App.StoryRoute = Ember.Route.extend({ setupController: function(controller, model) { controller.setProperties({ model: model, stories: App.Story.find() }); }, model: function(params) { return App.Story.find(params.story_id); } }); 

And keep the App.StoriesRoute route the same as a separate route that is not associated with App.StoryRoute .

 App.StoriesRoute = Ember.Route.extend({ model: function() { return App.Story.find(); } });