CODEWITHSUNDEEP
ember.js
user663031
user663031

Reputation:

Using subclasses as item controllers in ember

I have an ArrayController managing a collection of items of different flavors. To handle them, I have several item controllers, all subclassed from a generic item controller:

App.ItemsController = Ember.ArrayController.extend({
    lookupItemController: function (object) {
        switch (object.get('type')) {
            case 'type1': return 'ItemType1';
            case 'type2': return 'ItemType2';
        }
    }
});

//superclass for item controller
App.ItemController = Ember.ObjectController.extend({
    ...common logic to all item controllers
});

App.ItemType1Controller = App.ItemController.extend({
    msg: 'I am of type1',
    init: function() {console.log('in App.ItemType1Controller');}
});

App.ItemType2Controller = App.ItemController.extend({
    msg: 'I am of type2'
});

My first question is the correct syntax/format of the return value from lookupItemController. I tried 'App.ItemType1Controller' but that yields controller not found. The examples in the documentation show that returning 'field' means App.FieldController, but what should it be in my case?

Returning 'ItemType1' avoids any error, but the init hook is never invoked, and the msg property is undefined when used in a template such as

{{#each controller}}
    {{msg}}
{{/each}}

I tried stepping through the ember code but got lost in a maze of containers, parsers, and factories. Is there something wrong with what I'm trying to do, and what is the right way to accomplish it?

UPDATE

The answers helped me to solve my problem, which actually lay elsewhere. I had been subsetting the model as in

filteredContent: Ember.computed.filter('content', ...)

and then each'ing over it in the template

{{each filteredContent}}

and the problem was that the result of lookupItemController was not getting associated with each record within the collection (#each controller works fine). I still do not know how to solve this, so I took a different route, but it would be nice to know how to make {{each}} loop while assigning the custom controller to each item.

Upvotes: 0

Views: 348

Answers (1)

Marcio Junior
Marcio Junior

Reputation: 19128

The default lookupItemController in the ember source is the following:

lookupItemController: function(object) {
  return get(this, 'itemController');
}

So you can use any valid format, in the same way when itemController property is hardcoded in the controller, like:

App.MyArrayController = Ember.ArrayController.extend({
  itemController: 'myFoo'
});

This is documented here

In the end the itemController property will be used in the container, to retrieve a item controller instance, in that way:

container.lookup('controller:' + itemController);

Given a App.MyFooController you can use my.foo, myFoo, MyFoo and my_foo.

In your case you can do the following:

App.ItemsController = Ember.ArrayController.extend({
    lookupItemController: function (object) {
        switch (object.get('type')) {
            case 'type1': return 'itemType1';
            case 'type2': return 'itemType2';
        }
    }
});

I hope it helps

Upvotes: 2

Related Questions