Model unavailable in sub-route - ember.js

Question

App.Router.map(function() {
this.resource('products', function() {
this.resource('product', { path: ':product_id' }, function() {
this.route('general');
});
})
});
App.ProductsRoute = Ember.Route.extend({
model: function() {
return this.store.find('product');
}
});
App.ProductRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('product', params.product_id);
}
});
Templates:
<script type="text/x-handlebars" data-template-name="product">
Showing {{ name }}
<p>{{ outlet }}</p>
</script>
<script type="text/x-handlebars" data-template-name="product/general">
General template for {{ name }}
</script>
In the /products/3 view the name shows up as it should, but not in the /products/3/general view. Anybody know why?
I have tried to copy the App.ProductRoute and rename it to App.ProductGeneralRoute to find the correct model, but then the params does not exist.

Answer 1

In Ember, nested routes don't have access to their parent routes model. There are two ways to access parent models in a child route.
App.ProductGeneralRoute = Ember.Route.extend({
model: function() {
return this.modelFor('product');
}
});
This sets the model on the ProductGeneral route by getting the model for the ProductRoute. Or you can use needs:
App.ProductGeneralController = Ember.ObjectController.extend({
needs: ['product']
});
In the latter example, you will have access to controllers.product, which will allow you to call controllers.product.model in the template.
See this article for more info on needs.