Pass a collection of objects from controller into array in ember view

Question

I was wondering what the best way to pass an array of model objects into a new array defined in a view is in ember?

Basically: There is a bunch of people via an association in the controller:

App.MeetingsNewController = Ember.ObjectController.extend({
    needs: ['people'],
    init: function() {
        var people = this.get('controllers.people'); 
        people.set('content', App.Person.find());
    }
});

Then inside the template for that controller I am defining a view. Inside this view I want to get all of the people set on the controller and put them in an array. When one is selected I want to move it to a new array. Simple enough, but I cannot work out the process for doing this.

App.SearchField = Ember.View.extend({
    availablePeople: [],
    selectedPeople: [],
    init: function() {
        // What needs to go here to push objects from controller.people to availablePeople? 
    }
});

I have tried various things using this.get('controller.people') and pushObjects, but I never seem to be able to iterate over the list in the template of the view:

{{#each view.availablePeople}}
    <li>
        {{ name }}
    </li>
{{/each}}

What am I missing? Any help much appreciated!

Yes, I want to define it in the view so that each instance of the view has it's own collection of people, sorted between two arrays for each view. — i0n

intuitivepixel intuitivepixel · Accepted Answer · 2013-05-16T20:32:16

Looking at your case, the best way to have access to the controller in your view is to provide a controller for that view which can be referenced from another controller without problems, let me explain this in code:

First, create a controller for your SearchField view:

App.SearchFieldController = Ember.ObjectController.extend({
  needs: ['people'], //define here all controller that you need access to
  availablePeople: [],
  selectedPeople: [],
  init: function() {
    var people = this.get('controllers.people'); 
    // set your array's...
  }
});

Then change your SearchField view to SearchFieldView:

App.SearchFieldView = Ember.View.extend({
  ...
});

After that, you template need's some change to:

{{#each availablePeople}}
  <li>{{name}}</li>
{{/each}}

If you have followed Ember's naming conventions, then the SearchFieldController has been instantiated by Ember automatically and used for the SearchFieldView and through the needs in your SearchFieldController the access to your PeopleController is also guaranteed.

Hope it helps

Pass a collection of objects from controller into array in ember view

2 Answers