How can I access data on a related model in Ember Data from a controller?

I have a route that loads all order-items. Each order-item has one product. In the controller, I want to compute the total of the order by going through all the order-items and multiplying order-item.quantity by product.price. However, order.get('product.price') does not return the price. I think this is because the relationship is asynchronous. The result of the total computed property is NaN. How do I fix this? Thank you!

I also created a JSBin http://ift.tt/1ISqnuW

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('order-item');
  }
});

App.IndexController = Ember.Controller.extend({
  total: function() {
    return this.get('model').reduce(function(total, order) {
      return total + order.get('product.price');
    }, 0);
  }.property('model.@each.quantity')
});

App.OrderItem = DS.Model.extend({
  quantity: DS.attr('number'),
  product: DS.belongsTo('product', { async: true })
});

App.Product = DS.Model.extend({
  title: DS.attr('string'),
  price: DS.attr('number')
});

App.Product.reopenClass({
  FIXTURES: [
    { id: 100, title: 'Product A', price: 10 },
    { id: 200, title: 'Product B', price: 20 },
    { id: 300, title: 'Product C', price: 30 }
  ]
});

App.OrderItem.reopenClass({
  FIXTURES: [
    { id: 1, quantity: 5, product: 100 },
    { id: 2, quantity: 2, product: 200 },
    { id: 3, quantity: 1, product: 300 }
  ]
});