Ember.js: ArrayController undefined in template

Question

Problem:

I am kind of struggling with the organization of my first ember app. The current issue is that the my Items ArrayController is not defined in my dashboard template:

<script type="text/x-handlebars" data-template-name="dashboard">
    {{#if controllers.items}}
        <p class="alert alert-error">Dashboard can access item's info - Nice!</p>
    {{else}}
        <p class="alert alert-error">Dashboard cannot access items... :-/</p>
    {{/if}}
</script>

Likely cause: *

**EDIT: after talking with @conrad below, I'm kind of questioning this:*

I had a similar issue in an earlier post and kingpin2k suggested the cause was that I:

"never created anything that uses the options controller".

This is probably the case here as well. This quick screencast shows that a breakpoint on my ArrayController is not hit on page load - but it is hit when I inspect the Items controller in the Ember inspector tool (eg, Ember creates the ArrayController object right then for the first time).

Apparent non-solutions:

My Dashboard controller says it needs the Items controller. I guess that isn't enough to instantiate the ArrayController?

App.ItemsController = Ember.ArrayController.extend({
  len: function(){
    return this.get('length');
  }.property('length'),

  totalCost: function() {
    return this.reduce( function(prevCost, item){
      return parseInt(item.get('values').findBy('type', 'cost').price, 10) + prevCost;
    }, 0);
  }.property('@each.values')

  [more computed properties...]

});

App.DashboardController = Em.Controller.extend({
  needs: ['items'],
  itemsLength: Ember.computed.alias('controllers.items.len'),
  itemsTotalCost: Ember.computed.alias('controllers.items.totalCost'),

  [more computed properties...]
});

Furthermore, each item in Items is being rendered in my items template. I guess that does not create the missing controllers.items either...

<script type="text/x-handlebars" data-template-name="items">
    {{#each}}
        [these render fine]
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="display">
<!-- DISPLAY TEMPLATE -->

    {{!- DASHBOARD -}}
    {{render dashboard}}

    {{!- ITEMS -}}
    {{render 'items' items}}

</script>

So then.. what?

I can imagine many possible avenues, but haven't gotten any of them to work yet:

Specify the Items ArrayController in {{render dashboard}}?
Some configuration in a Route?
Maybe my templates/routes are not correctly arranged?

Ember view tree Ember routes

Poindexter Poindexter · Accepted Answer · 2013-11-22T16:43:25

You could make sure that the ItemController is instantiated in the dashboard template by calling it in the DashboardController's init function:

App.DashboardController = Em.Controller.extend({
    needs: ['items'],
    init: function() {
        this._super();
        this.get('controllers.items.length');
    }
});

/edit:

removed the part that was not helpful

Ember.js: ArrayController undefined in template

1 Answers