Ember.js help for router map

Question

I want get URL: localhost#/234/23/456/524jk53 (/one_id/two_id/three_id/four_id)

Stat.Router.map(function () {
    this.resource('one', {path: '/:one_id'}, function(){
            this.resource('two', {path: '/:two_id'}, function(){
                this.resource('three', {path: '/:three_id'}, function () {
                    this.resource('four', {path: '/:four_id'});
                });
            });
        });
});

and separation of templates:

 <script type="text/x-handlebars">
    {{outlet one}}<br>
    {{outlet two}}<br>
    {{outlet three}}<br>
    {{outlet}}
 </script>
<script type="text/x-handlebars" data-template-name="one">
  one, to {{linkTo 'two'}}two{{/linkTo}}
</script>
<script type="text/x-handlebars" data-template-name="two">
  two, to {{linkTo 'three'}}three{{/linkTo}} 
</script>
<script type="text/x-handlebars" data-template-name="three">
  three, to {{linkTo 'four'}}four{{/linkTo}} 
</script>
<script type="text/x-handlebars" data-template-name="four">
  four
</script>

route:

App.oneRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render('two', {outlet: 'two'});
        this.render('three', {outlet: 'three'});
        this.render('four', {outlet: 'four'});
    }
});

i have error: assertion failed: Cannot call get with 'id' on an undefined object.

Please, help me write router.map for this application's hierarchy

Answer 1

Okay, so first up, you can remove the / from { path: '/:dynamic_id' } .

Next, you need to understand that when a dynamic segment is expected within the route you are referencing in your linkTo helper, you need to pass model (or other) objects as additional parameters to the linkTo helper as context for each dynamic segment.

This is probably why you're getting the error. Your router should look something like this:

Stat.Router.map(function () {
    this.resource('one', {path: ':one_id'}, function(){
            this.resource('two', {path: ':two_id'}, function(){
                this.resource('three', {path: ':three_id'}, function () {
                    this.resource('four', {path: ':four_id'});
                });
            });
        });
});

And in your template, you should be passing context for the segments, so for instance:

{{linkTo 'two' modelOne modelTwo}}Hello World!{{/linkTo}}

Anyway, I think that you need to refine your question some what. What exactly are you trying to achieve? If your dynamic segments aren't model IDs, then you might need to look at overriding the serialize callback in the relevant route files.