Model hook does not get called for nested routes

Ember CLI
1

I am using ember-cli v 0.2.1. My router.js looks as follows:

Router.map(function() {
  this.route('projects', function() {
    this.route('project-id', { path:':id' });
  });

My routes/projects.js looks as follows:

export default Ember.Route.extend({
  model: function(){
    var clientID = 'FooBarFooBarFooBar';
    var query = 'motorcycle';
    var url = "https://api.behance.net/v2/projects?q="+ query +"&client_id="+ clientID;
    return ajax({url:url,type:'GET', dataType: "jsonp"}).then(function(res){	
      return res.projects;
    });
}
});

Part of my templates/projects.hbs looks as follows:

{{#each item in content}}
<div class="row">
<h4>
   {{#link-to 'projects.project-id' item}}
      {{item.name}}
   {{/link-to}}
</h4>
{{/each}}
{{outlet}}

My routes/projects/project-id.js looks as follows:

export default Ember.Route.extend({
	model: function(parmas){
	  var clientID = 'FooBarFooBar';
	  var url = "https://api.behance.net/v2/projects/"+ parmas.id +"?api_key="+ clientID;
	  debugger;
	  return ajax({url:url, type:'GET', dataType: "jsonp"}).then(function(res){	
	    debugger;	
	    return res.project;
           });
         },
});

When I click on a particular project, URL changes with appropriate project id but model hook in project-id.js does not get called. It gets called when I refresh the page with URL /projects/:project_id already set in it. Please, help me understand this behaviour. I want the model hook to be called when someone clicks on the particular project.

2

I have observed that setupController hook is called when you transition inside app and model and setupController hooks are called in order when you reload the route url. Try implementing setupController method and debug it both ways.

1 Like
3 
{{#link-to 'projects.project-id' item}}

You could force the model hook call by changing the line above to

{{#link-to 'projects.project-id' item.id}}
1 Like
4

Passing item.id calls the model hook which satisfies the purpose for now. Thanks for the help.

5

The behaviour you’re seeing is accused by the fact, that the beforeModel and model hooks are not invoked if you’re passing an object within the {{link-to}} helper. If you pass an object, this object will be treated like the already resolved model which causes Ember to bypass the all hooks before afterModel.

5 Likes
7

Yes, you are right. setupController hook gets invoked as well. Thanks.

8

@herom @splattne @kushdilip I understand the behavior now. If I pass a string (item.id) inside {{link-to}} helper, model and beforeModel hook gets invoked, but if I pass an object (item) model and beforeModel hook does not get invoked. And setupController hook always gets invoked. Thanks.

1 Like
9

I also ran into this but found that when I link-to or transitionTo a parent route (with no params) I needed to tell the router w/ a query string to always refresh. If anyone is interested in how I did this - this commit shows all the changes required to force my top level model hook to fire any time you link-to or transitionTo it

2 Likes