Assigning model to deeply nested view in Ember.js

Question

I have a template that has a nested view. The nested view in turn has its own nested view. The views should all be rendered under the same route and use their own specific models. The browse template does not have an associated model.

The templates look like this:

<script type="text/x-handlebars" data-template-name="browse">
    {{render "category" category}}
</script>

<script type="text/x-handlebars" data-template-name="category">
    {{render "sort" sort}}
</script>

<script type="text/x-handlebars" data-template-name="sort">
    <ul>
    {{#each m in model}}
        <li>{{m.sortType}}</li>
    {{/each}}
    </ul>
</script>

I'm returning all the models I need under the browse route:

App.BrowseRoute = Ember.Route.extend({
    model: function () {
        var store = this.store;
        return new Em.RSVP.Promise(function (resolve, reject) {
            new Em.RSVP.hash({
                category: store.find('category'),
                sort: store.find('sort')
            }).then(function (results) {
                resolve({
                    category: results.category,
                    sort: results.sort
                });
            });
        });
    }
});

I have no problem attaching the category model to the category template this way, but I'm unable to attach the sort model to the sort template. The sort model data is being returned, I just cannot figure out how to associate it with the sort template. Is it because the sort template is nested two levels deep?

Thanks!

Answer 1

Into the context of the view 'category' don't exist the variable 'sort', you need to do something like this:

(in the view of category you can use the variable 'category')

<script type="text/x-handlebars" data-template-name="browse">
		{{render "category" model}}

	</script>

<script type="text/x-handlebars" data-template-name="category">
		 {{category}}
		{{render "sort" sort}}
</script>

<script type="text/x-handlebars" data-template-name="sort">
		<br/>{{model}}
		<ul>
			{{#each m in model}}
			<li>{{m.sortType}}</li>
			{{/each}}
  </ul>
</script>

Sorry for my english

Answer 2

The answer is in the context.

The browse view's route retrieves the category and sort models, so it knows about them both. That's why I can pass the category model when I render the category template. However, the category template doesn't know about the sort model, so it can't pass it to the sort template, but the category template can reference its parent, so I was able to pass the sort model from category to the sort template be referencing the parent. Here's the piece of code that solved the problem:

<script type="text/x-handlebars" data-template-name="category">
    {{render "sort" parentController.sort}}
</script>