CODEWITHSUNDEEP
javascriptember.jshandlebars.js
levanovd
levanovd

Reputation: 4165

Nested routes and template replacement in Ember.js

I try to develop a simple Ember.js app.

I think that these screens describe the desired scenario good enough.

  1. Index

  2. Movies list

  3. Movie detailed info

Buttons on the top are #link-tos. Note that I want the first button to be highlighted on the 3rd screen.

It's easy to find examples where the 3rd template lives in the outlet in the 2nd one, but I need some kind of template replacement in the main outlet.

Please help me to achieve this behavior. Hope that my description is clear enough.

Upvotes: 1

Views: 125

Answers (1)

Yury Svechinsky
Yury Svechinsky

Reputation: 336

You can make list and detail routes same level, so they both are rendered to the same outlet, one at time. Like that:

App.Router.map(function() {
    this.resource("movies", function() {
        this.route("list");
        this.route("view", {path:"view/:movie_id"});
    });
});

App.MoviesIndexRoute = Em.Route.extend({
   redirect : function() {
      this.transitionTo('movies.list');
   }
});

All the rest is done as allways

Upvotes: 4

Related Questions