Class Ember.ArrayController

Extends: Ember.ArrayProxy
Uses: Ember.ControllerMixin , Ember.SortableMixin
Defined in: packages/ember-runtime/lib/controllers/array_controller.js:13
Module: ember

Ember.ArrayController provides a way for you to publish a collection of objects so that you can easily bind to the collection from a Handlebars #each helper, an Ember.CollectionView, or other controllers.

The advantage of using an ArrayController is that you only have to set up your view bindings once; to change what's displayed, simply swap out the content property on the controller.

For example, imagine you wanted to display a list of items fetched via an XHR request. Create an Ember.ArrayController and set its content property:

1
2
3
4
5

MyApp.listController = Ember.ArrayController.create();

$.get('people.json', function(data) {
  MyApp.listController.set('content', data);
});

Then, create a view that binds to your new controller:

1
2
3

{{#each MyApp.listController}}
  {{firstName}} {{lastName}}
{{/each}}

Although you are binding to the controller, the behavior of this controller is to pass through any methods or properties to the underlying array. This capability comes from Ember.ArrayProxy, which this class inherits from.

Sometimes you want to display computed properties within the body of an #each helper that depend on the underlying items in content, but are not present on those items. To do this, set itemController to the name of a controller (probably an ObjectController) that will wrap each individual item.

For example:

1
2
3

  {{#each post in controller}}
    <li>{{title}} ({{titleLength}} characters)</li>
  {{/each}}
 
1
2
3
4
5
6
7
8
9
10
11

App.PostsController = Ember.ArrayController.extend({
  itemController: 'post'
});

App.PostController = Ember.ObjectController.extend({
  // the `title` property will be proxied to the underlying post.

  titleLength: function() {
    return this.get('title').length;
  }.property('title')
});

In some cases it is helpful to return a different itemController depending on the particular item. Subclasses can do this by overriding lookupItemController.

For example:

1
2
3
4
5
6
7
8
9

App.MyArrayController = Ember.ArrayController.extend({
  lookupItemController: function( object ) {
    if (object.get('isSpecial')) {
      return "special"; // use App.SpecialController
    } else {
      return "regular"; // use App.RegularController
    }
  }
});

The itemController instances will have a parentController property set to either the the parentController property of the ArrayController or to the ArrayController instance itself.

Show:

Methods

Properties

Events

No documented items