javascript - Ember JS transition to nested routes where all routes are dynamic segments from a view -

we writing application using emberjs. still new framework , we're having hard time resolving of may seem straight forward.

the model pretty simple, there 3 models: queue, task, , image. using dynamic uri segments routes , routes these models nested in form: :queue_id/:task_id/:image_id.

the routes configured way:

app.router.map(function() {    this.resource('queue', {path: ':queue_id'}, function() {       this.resource('task', {path: ':task_id'}, function() {          this.resource('image', {path: ':image_id'});       });    }); } 

and somewhere in html, have simple template iterate through images task:

{{#each task.images}}    <li>       {{#view app.thumbnailview.contentbinding="this"}}          <img {{bindattr src="thumbnail.url"}} />       {{/view}}    </li> {{/each}} 

and here code thumbnail view:

app.thumbnailview = ember.view.extend({    tagname : 'a',    click : function(e) {        var task = //assume value exists;        var queue = //assume value exists;        var image = //assume value exists;         this.get('controller.target.router').transitionto('image', queue, task, image);    } }); 

finally, here's our imageroute:

app.image = ember.object.extend(); app.image.reopenclass({     find : function(image_id) {        //this set breakpoint        console.log(image_id);     } });  app.imageroute = ember.route.extend({     model : function(params) {       //image_id last uri segment in: #/1/1/1       return app.image.find(params.image_id);     } }); 

the problem: call this.get('controller.target.router').transitionto() seems working. can see when click in 1 of thumbnails view, url changes (e.g /1/1/2 /1/1/3). however, i'm not seeing state change in ui. also, line put breakpoint doesn't seem triggered. when refresh page, works well.

is there wrong transition code?

thanks.

two things note:

first, instead of

this.get('controller.target.router').transitionto('image', queue, task, image); 

use:

this.get('controller').transitiontoroute('image.index', queue, task, image); 

this might not change behaviour, it's more ember idiomatic.

the second thing following:

internal transitions not trigger model hook on route, because ember assumes passing model along transition, no need call model hook since passed model.

that why breakpoint doesn't triggered, find isn't being called (as shouldn't).

i don't have enough information find issue if guess fact page refresh works , internal transition doesn't there inconsistency between objects passed transitionto , between returned model hook.

you should pass exact object transitionto ones have been returned themodel hook.

if doing:

this.get('controller').transitiontoroute('image.index', queue, task, image); 

and it's not working, wrong either queue, task, or image models passing.

so this:

   var task = //assume value exists;    var queue = //assume value exists;    var image = //assume value exists; 

is not helpful because problem is.