EmberJS在嵌套路由中获取动态参数

Question

I am developing a website using Ember JS. I have created a nested route like this:

//router
this.resource('store/checkout', {path: '/store/checkout/:order_id'}, function(){
      this.resource('store/checkout-lines', {path: ''});
  });

This results in the route /store/checkout/:order_id calling both routes and corresponding tempaltes. The template for store/checkout has an {{outlet}} for the template store/checkout-lines. In the routes I have this code:

//store/chekout
export default Ember.Route.extend({
    model: function(params) {
        return this.store.find('order', params.order_id);
    }
});

//store/checkout-lines
export default Ember.Route.extend({
    model: function(params) {
        var order_id = params.order_id; //this does not work
        return this.store.find('order-item', {orderId: order_id});
    }
});

But my problem is that in the route for store/checkout-lines, I cannot get the orderId. How can I achieve this? Or am I at the wrong track and should be doing this in another way? My goal is that the route /store/checkout/:order_id should call the server to fetch both order and orderItems.

Answer 1

What some people seem to miss is that even if you are visiting a nested route, the model for the parent route is loaded. In your nested route, you can easily fetch the model from the parent route using modelFor(type) and then get your information from there. In your case it would be like this.

//store/checkout-lines
export default Ember.Route.extend({
    model: function(params) {
        var order_id = this.modelFor('checkout').get('id');
        return this.store.find('order-item', { orderId: order_id });
    }
});

This might seem like an extra step but when you get around to it it really makes a lot of sense and works very well.