Ember.js - Diff between ArrayController and CollectionView

Question

Both ArrayController and CollectionView have same functionality to render 'content' array using template, except that collection view have 'append..' methods to append in to anywhere in DOM. Am I right? Is there any other diff? Which one will be more useful?

Answer 1

An ArrayController is just an extension of Ember.ArrayProxy. It provides an interface to working with an array set as its contents. It handles dispatching array mutation notifications to any observers. It does not handle anything to do with the DOM, and is completely isolated from events or the view layer.

A CollectionView is a view (which means it manipulates the DOM and handles events) which takes an ArrayController (or anything that meets the expectations of an Ember.Array) and reflects its contents as Ember.Views. It listens to the mutation events put out by the ArrayController, and updates itself to match. It works by specifically listening to arrayDidChange messages. Without those messages coming from its content, it wouldn't know to create or destroy its views.

When you use the {{#each YourApp.yourArrayController}} helper, you're actually instantiating an Ember.CollectionView, that takes the controller as its content.

Answer 2

ArrayController is a Controller. CollectionView is a View. That's a pretty fundamental conceptual difference. In theory, ArrayController requires a View to render an array using a template. That's why the View has the append methods and the Controller does not.