Two Ember.JS ArrayControllers?

Question

I'm having a bit of a problem with an Ember.JS app I'm building:

    App.userController = Ember.ArrayController.create({
        content: [],

        init: function() {
            this.set('content', []);
            this.refresh();
        },

        refresh: function() {
            //Refresh Action
        }
    });

    App.supplierController = Ember.ArrayController.create({
        content: [],

        init: function() {
            this.set('content', []);
            this.refresh();
        },

        refresh: function() {
            //Refresh Action
        }
    });

    <h1>Users</h1>
    {{#each user in App.userController}}
        {{user.name}} - {{user.age}}
    {{/each}}

    <h1>Suppliers</h1>
    {{#each supplier in App.supplierController}}
        {{supplier.name}} - {{supplier.revenue}}
    {{/each}}

It works... but the users are displayed in the same list as the suppliers? If I remove the supplier controller, they display in the correct position. I think this is to do with having two instances of Ember.ArrayController but I'm not sure. It displays like this:

Users
-----------
Suppliers
-----------
User 1 - 
User 2 -
Supplier 1 - £100

When it should be displaying this:

Users
-----------
User 1 - 30 
User 2 - 25

Suppliers
-----------
Supplier 1 - £100

Mike Grassotti · Accepted Answer · 2013-03-11 14:41:50Z

1

Your code seems fine. There is nothing wrong with having two instances of ArrayController. I made a jsbin based on your question and see users/suppliers in the right place. Check it out here: http://jsbin.com/ovitak/1/edit

Since your example didn't show how the data was being loaded, I implemented the refresh() methods to populate list of users/suppliers based on your expected output:

App = Ember.Application.create({});

App.userController = Ember.ArrayController.create({
    content: [],

    init: function() {
        this.set('content', []);
        this.refresh();
    },

    refresh: function() {
      this.addObject({name: 'u 1', age: 22});
      this.addObject({name: 'u 2', age: 35});
    }
});

App.supplierController = Ember.ArrayController.create({
    content: [],

    init: function() {
        this.set('content', []);
        this.refresh();
    },

    refresh: function() {
        //Refresh Action
      this.addObject({name: 'supplier 1', revenue: 200});
    }
});

answered Mar 11, 2013 at 14:41

Mike Grassotti

19.1k3 gold badges62 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rudi Over a year ago

in addition you probably want to use Ember.ArrayController.extend() instead of Ember.ArrayController.create();

andy Over a year ago

Thank you! I found the problem. I had a variable called me that was declared in refresh. It wasn't declared properly so I'm guessing the two controllers were referencing the same me thus pushing an object to the same thing.

Collectives™ on Stack Overflow

Two Ember.JS ArrayControllers?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related