Populate Ember.Select directly from Database

Question

Let me explain my issue, I am trying to populate Ember.Select directly from database.

I have these routes:

       this.resource('twod', function() {
            this.resource('twoduser', {
                path : ':user_id'
            });
        });

In twoduser, I am displaying a full information about a single user. In that view, I have a Select Box as well, which end user will select and then with a button, he can add the user to a team that he selected from Ember.Select.

I tried to do this,

App.TwoduserController = Ember.ArrayController.extend({
    selectedTeam : null,
    team : function (){
        var teams = [];
        $.ajax({
            type : "GET",
            url : "http://pioneerdev.us/users/getTeamNames",
            data : data,
            success : function (data){
                for (var i = 0; i < data.length; i ++){
                    var teamNames = data[i];
                    teams.push(teamNames);
                }
            }
        });
       return teams;
    }.property()
})

Then in my index.html:

         {{view Ember.Select
    contentBinding="team"
    optionValuePath="teams.team_name"
    optionLabelPath="teams.team_name"
    selectionBinding="selectedTeam"
    prompt="Please Select a Team"}}

But when I do this, for some reason it interferes with Twoduser and I am not able to view the single user.

Furthermore, here's a sample JSON response I will get through the url:

{"teams":[{"team_name":"Toronto Maple Leafs"},{"team_name":"Vancouver Canuck"}]}

Moreover, I am fetching all users using Ajax like this:

App.Twod.reopenClass({
    findAll : function() {

        return new Ember.RSVP.Promise(function(resolve, reject) {
            $.getJSON("http://pioneerdev.us/users/index", function(data) {
                var result = data.users.map(function(row) {
                    return App.Twod.create(row);
                });
                resolve(result);
            }).fail(reject);
        });
    },
    findBy : function(user_id) {

        return new Ember.RSVP.Promise(function(resolve, reject) {
            var user = App.Twod.create();
            $.getJSON("http://pioneerdev.us/users/byId/" + user_id, function(data) {
                var result = user.setProperties(data.user);
                resolve(result);
            }).fail(reject);
        });
    }
});

Though there's one thing, I have a separate Teams route:

this.resource('teamview', function(){
            this.resource('teamviewdetail', {
                path : ':team_id'
            });
        });

Which shows all the teams and a single team when you click on a single team.

Can I use that TeamviewController? or Can I fetch team names from Twoduser Controller and push names to the array as I mentioned before?

More Information:

If I use the way I mentioned, I get this error:

Uncaught TypeError: Object [object Object] has no method 'addArrayObserver'

Here's a working jsfiddle on the issue I am experiencing. You can select "Storyboard" from the Designation & then select the user. That will reproduce the issue.

One more Update: Seems using ObjectController instead of ArrayController issue solves the addArrayObserver issue. But still I can't get the teams in the Ember.Select.

Answer 1

The biggest issue here is that you use Array#push instead of pushObject. Ember needs the special methods in order to be aware of changes. Otherwise, it will continue to think that the array of teams is as empty as when you first returned it. Second biggest issue is that your ajax success call isn't accessing the returned data properly.

Also, optionValuePath and optionLabelPath are relative to the individual select option view, so they should start with content, which is the individual item as set on the view. So: content.team_name