Ember.js hasMany Relationship Not Resolving before Render

Question

When I try to render a list of view models contained in a chart model using the each handlebars helper, the promise array for the view models doesn't resolve before the each helper renders, leaving blank lis:

problem

template:

<script type="text/x-handlebars" id="chart-container">
    {{views}}
    <ul>
        {{#each view in views}}
            <li>{{view}}</li>
        {{/each}}
    </ul>
</script>

What's odd is that if I change the each helper to {{#each views}} it works fine.

How can I make the view render once the promised hasMany relationship has been resolved using view in views for the each helper? Below are the relevant models and fixtures:

displayItem model:

var DisplayItem = DS.Model.extend({
    name: DS.attr("name"),
    display: DS.belongsTo("display", {async: true})
});

chart model:

var Chart = DisplayItem.extend({
    views: DS.hasMany("view", {async: true})
});

view model:

var View = DS.Model.extend({
    name: DS.attr("string"),
    chart: DS.belongsTo("chart", {async: true})
});

relevant fixture data:

Chart.FIXTURES = [
        {
            id: 1,
            name: "Derp",
            display: 1,
            views: [1, 2],
            defaultView: 1
        }
    ];

View.FIXTURES = [
        {
            id: 1,
            name: "Test 1",
            chart: 1
        },
        {
            id: 2,
            name: "Test 2",
            chart: 1
        }
    ];

Kingpin2k Kingpin2k · Accepted Answer · 2014-07-07T23:49:15

To answer your question, the route is simplest place to do it. Using nested promises Ember won't setup the controller etc, until the deepest promise has resolved.

App.ChartContainerRoute = Em.Route.extend({
  model: function(){
    return this.store.find('chart').then(function(charts){
      return Em.RSVP.all(charts.getEach('views')).then(function(){
        return charts;
      });
    });
  }re
});

Generally I'd recommend against waiting on all of the async calls (since Ember will asynchronously inject them into the page). If you are trying to modify the view after it's been inserted, there are other patterns that can solve this while giving a more responsive feeling app.

The real problem you're seeing

You aren't specifying anything to show in the li, and you're using a key word view

<li>{{view.name}}</li>

http://emberjs.jsbin.com/OxIDiVU/790/edit

view usually refers to the view associated with the current template etc.

    {{#each item in views}}
        <li>{{item}}</li>
    {{/each}}

http://emberjs.jsbin.com/OxIDiVU/791/edit

Ember.js hasMany Relationship Not Resolving before Render

1 Answers

The real problem you're seeing