The documentation has an example of using an ArrayController with this template:

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

This is how the ArrayController is used:

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

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

How would this work differently than using a plain array like this instead?

MyApp.listController = [];

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

The documentation has an example of using an ArrayController with this template:

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

This is how the ArrayController is used:

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

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

How would this work differently than using a plain array like this instead?

MyApp.listController = [];

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

• javascript
• model-view-controller
• ember.js

2 Answers 2

If you don't need the behavior of a controller, you can use a plain array.

An ArrayController wraps an array, with some other properties added, such as the sortable mixin. You can see it here:

https://github./emberjs/ember.js/blob/master/packages/ember-runtime/lib/controllers/array_controller.js

in the ember.js documentation says:

(http://docs.emberjs./symbols/Ember.ArrayController.html)

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.

it uses an Array in background, only helps with methods to work with the array:

Although you are binding to the controller, the behavior of this controller is to pass through any methods or properties to the underlying array