Two Ember.JS ArrayControllers? - ember.js

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

Answer 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});
}
});