Ember.js: Removing an object from an ArrayController

Question

I have an ArrayController that uses an itemController to manage a set of components. The ArrayController in this example represents a book, and the item controllers represent the pages of the book. Each page has a unique ID that is generated by a App.generateId function. The model for a page is App.Page . It does not use Ember-Data.

// ArrayController
App.BookController = Ember.ArrayController.extend({
  itemController: 'page',

  addPage: function (options) {
    return this.pushObject(
      App.Page.create({
        uid: App.generateId('page')
      })
    );
  },

  removePage: function (page) {
    console.log('Content array: ' + this.get('content'));
    console.log('Content array length: ' + this.get('content').length);
    console.log('Page UID: ' + page.get('uid'));
    console.log('Page at content[0]: ' + this.objectAt(0));
    console.log(this.findProperty('uid', page.get('uid')));
  }
});


// ItemController
App.PageController = Ember.Controller.extend({});

// Page Model
App.Page = Ember.Object.extend({
  uid: ''
});

The addPage method woks fine. It gets called and successfully creates+adds a page to the book and wraps it in the item controller.

I am having trouble with the removePage function. Here is the output of the console logs that I have in that method (after adding 1 page, and trying to remove it):

console.log('Content array: ' + this.get('content'));
//--> Content array: <(subclass of App.Page):ember667>

console.log('Content array length: ' + this.get('content').length);
//--> Content array length: 1

console.log('Page UID: ' + page.get('uid'));
//--> Page UID: page-cm6p6pmmt5aq50i9ej7ona1dsand3mf

console.log('Page at index 0: ' + this.objectAt(0));
//--> Page at index 0: <App.PageController:ember668>

console.log(this.findProperty('uid', page.get('uid')));
//--> undefined

I am confused on two points:

1. When I output the contents of content on the ArrayController, it shows the single page as a subclass of the model (App.Page) with Ember ID 667. When I look at the object at index 0 of the content array with this.objectAt(0) , it shows me not the model, but the item controller for the page, with Ember ID 668. Shouldn't these two outputs be the same?

2. Why does the findProperty method return undefined ? The same happens for other methods as well, such as findBy . I see that Ember.ArrayController extends Ember.ArrayProxy, which then in turn uses Ember.MutableArray. I've read that you can't do this sort of stuff to immutable arrays out of Ember-Data.

Any help is extremely appreciated.

Answer 1

When you iterate your ArrayController, or try and access an item from the collection via the ArrayController, it returns the model wrapped with the item controller. If you iterate or try fetching from the model/content on the controller it just returns the model.

Generally when using the ArrayController and ObjectController you don't need to use content or model . This is due to both controllers being proxy controllers which proxy requests down to the model/content it's decorating.

console.log('Content array length: ' + this.get('length'));
console.log('Page UID: ' + page.get('uid'));
console.log('Page at content[0]: ' + this.objectAt(0));
console.log(this.findBy('uid', page.get('uid')));

findProperty is deprecated, and you should be using findBy (despite the undefined issue, I'll try and replicate real quick).

Additionally your actions addPage and removePage should be in an actions hash.

actions: {
  addPage: function(){...},
  removePage: function(){...},

}

The Problem

The real problem is your itemController is extending Ember.Controller . Ember.Controller is not a proxy controller, it is a controller that is assumed to have no model backing it, so it won't proxy requests down to it. You'll just need to change this to Ember.ObjectController and you'll be good.

Example:

http://emberjs.jsbin.com/wulosufu/2/edit