Structuring ember.js code

I'm trying to figure out the "right" way to structure a part of my Ember app

A basic overview:

Let's say I have a Course model defined similarly:

var Course = DS.Model.extend({
    videos: hasMany('video', { async: true }),
    categories: hasMany('category', { async: true })
});

Each video has a category associated with it.

In my CourseView or CourseController, how am I supposed to get a list of the videos for each category?

First, I tried using a computed property, but any call like this.get('model').get('videos') returns a Promise – not what I want.

Next, I saw some posts about using that and then setting properties on the controller after the Promise resolves, so the View would update when the properties changed, but this involves a lot of almost-callback hell and I'm hoping there's a better way to approach the problem.

Is there any way I can "load" the videos/categories before the view gets rendered? Ideally I'd be able to do something like:

{{#each category in categories}}

    // render category-related stuff and only videos in this category

{{/each}}

Would it be better ot have all of the videos on the Category? Is there any way I can define/add properties to a model without having them be sent to the server? I guess this can be seen as a general question about API design as well – should videos be under categories? Essentially there'll be a list of Courses, each with its own set of categories. Every video must fall under one category. After typing it out this way it makes sense for videos to be under categories if all of them must be under some category...