Routing problem with redirect and automatic child route rendering

1

I have a routing related question.

App.Router.map(function(){
    this.resource('whiteBoards',function(){
        this.resource('whiteBoard',{path:'/:whiteBoard_id'},function(){
            this.resource('image');
            this.resource('video');
          });
    });
    this.resource('dummy');
});

App.WhiteBoardsRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('whiteBoard');
    }
});
App.ImageRoute =  Ember.Route.extend({
    model: function(){
        return this.store.find('image');
    }
});

If I click all navigational links manually all things works as expected.

my templates:

<script type="text/x-handlebars" data-template-name="application">
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">

            <!-- Be sure to leave the brand out there if you want it shown -->
            <a class="navbar-brand" href="/index.html">Routing Test</a>
        </div>

        <ul class="nav navbar-nav">
            <li>{{#link-to 'whiteBoards'}}WhiteBoard{{/link-to}}</li>
            <li>{{#link-to 'dummy'}}Dummy{{/link-to}}</li>

        </ul>

        </div>

       </nav>

    {{outlet}}

</script>

<script type="text/x-handlebars" data-template-name="whiteBoards">

    <ul class="nav nav-tabs whiteBoards">

        {{#each whiteBoard in controller.content}}

        <li>
            {{#link-to 'whiteBoard' whiteBoard}}{{whiteBoard.title}} {{/link-to}}
        </li>
        {{/each}}
    </ul>

    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="whiteBoard">
    <div class="whiteBoard">
        <H3>WhiteBoard   {{controller.content.name}}</H3>
    </div>
    <ul class="nav nav-tabs">
        <li>
            {{#link-to 'image'}}Images{{/link-to}}
        </li>
        <li>
            {{#link-to 'video'}}Videos{{/link-to}}
        </li>
    </ul>
 {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="image">
    <div class="imagelist">
        <H3>Images</H3>
        <ul>
            {{#each img in controller.content}}
            <li>{{img.name}}</li>
            {{/each}}

        </ul>
    </div>
</script>

The problem occurs if I try to activate (as default child route) the image route in combination with a whiteBoard navigation click. This mean If I select a whiteBoard a list of images should also be shown (here only a simplified image list).

To achieve this I insert:

App.WhiteBoardIndexRoute =  Ember.Route.extend({
    redirect: function(){
        this.transitionTo('image');
    }
});

The first time it works as expected (the selected whiteBoard is shown and the image list). If I try to navigate to another whiteBoard the problems begins. After inserting WhiteBoardIndexRoute I can’t navigate to another whiteBoard. What is the problem ?

I’m working with ember.js verion 1.0

I known that I can implement the display of the image list using the renderTemplate method in the WhiteBoardRoute but I think that it should be possible to use the “default child route concept”.

2

My first impression is that you shouldn’t need to nest individual whiteboard into your list of whiteboards. You don’t have a single route, which leads me to believe that you need to look deeper into the difference between resources and routes.

In quick summary, nested routes are meant to be rendered inside of parent’s template. Ember.js assumes that all of the data necessary to display the nested route has been loaded by the parent template.

By putting resources inside of another resource, you’re already nesting them but you have to be careful cause it will create situations like you’re describing.

You can read my article on Ember Sherpa which covers a lot more about routes and resources.

You can also try to recreate your routes in emberjs.jsbin.com which helps in issolating the problems.

3

Thank you for this hint. I will look deeper into the difference between resources and routes !

4

Hi Taras,

I have reviewed the routing guide and your article. I have changed my example app. You can look at my app at http://jsbin.com/IXUKOy/4/edit?output. My navigation problem is still existing. I can not navigate to Private Whiteboard without additional activity. If I click the video Tab and after that the Private Whiteboard Tab then the transition takes place as expected. Do you have a hint what the problem is ?

best regards

Andreas

5

Hi Andreas, I’m going to look into it now and get back to you.

6

Ok, its working now. http://jsbin.com/ovuZiNi/1/

The problem lies use of redirect hook inside of WhiteboardIndexRoute.

  1. redirect hook is deprecated. Its still in Guide incorrectly.
  2. to transition to ‘whiteboard.image’ route, you need a model. This model is only available in WhiteboardImageRoute afterModel, so you have to transition there.
7

Thanks to Peter Wagenet for pointing out on Twitter, model is available in redirect hook. There is controversy about whether or not it’s deprecated, so here is a version with redirect working correctly http://jsbin.com/ovuZiNi/2/edit

8

And, redirect hook has been undeprecated. Use this solution http://jsbin.com/ovuZiNi/2/edit

9

Hi Taras,

This hints helps a lot !

I’m happy that now I have an easy solution for the problem. Nevertheless the controversy discussion about redirect is also interesting.

For my taste redirect sounds good in the use cases of redirect to a login page or some thing like this. In my scenario a automatic expand of my navigational path is wanted. I think that is a different use case.