Ember.Select works sometimes but assertion fails

Question

In my ember.js app, I have a 'user' model that has a "hasMany" relationship to 'group'. A user can be a member of zero or more groups. To allow the user to select the groups, I am using the built-in Ember.Select view.

If I load my users via the route /users, I can see the user and the groups to which that user is assigned. If I go to the edit route (/users/1/edit), I use Ember.Select to show the universe of all groups, along with the selection of that user's "selected" groups. Unfortunately, when I transition via the /users route, none of the groups are selected. If I refresh the page on the edit route, I see the groups correctly selected as I expect.

Another thing to note is that I don't see any errors when transitioning from /users to /users/1/edit (with no selected groups). However, when I refresh directly from the /users/1/edit route, the selection works correctly, but I see the following in the console (I am including a bit of the stack):

Assertion failed: The content property of DS.PromiseArray should be set before modifying it ember.js:394
(anonymous function) ember.js:394
Ember.assert ember.js:53
Ember.ArrayProxy.Ember.Object.extend._replace ember.js:16284
Ember.ArrayProxy.Ember.Object.extend.replace ember.js:16291
Ember.EnumerableUtils.replace ember.js:1829
Ember.Select.Ember.View.extend._changeMultiple ember.js:27933
Ember.Select.Ember.View.extend._change ember.js:27859
Ember.Select.Ember.View.extend._triggerChange ember.js:27902
sendEvent ember.js:2334

Any pointers would be helpful!

user_model.js:

Usermanagement.User = DS.Model.extend({
    authenticateExternally: DS.attr(),
    email: DS.attr(),
    enabled: DS.attr(),
    firstName: DS.attr(),
    lastName: DS.attr(),
    password: DS.attr(),
    systemExternalAuthenticationEnabled: DS.attr(),
    selectedGroups: DS.hasMany('group', {
        async: true
    }),
    username: DS.attr(),
    meta: DS.attr(),

    fullName: function() {
        return '%@ %@'.fmt(this.get('firstName'), this.get('lastName'));
    }.property('firstName', 'lastName'),
});

user_edit_template.hbs: (snippet)

          <div class="field form-group">
            <div class="fieldLabel">Groups</div>
              {{view Ember.Select
                multiple="true"
                class="form-control"
                selectionBinding="selectedGroups"
                contentBinding="controllers.groups.allGroups"
                optionLabelPath="content.name"
                optionValuePath="content.id"}}
          </div>

groups_controller.js:

Usermanagement.GroupsController = Ember.ArrayController.extend({
    allGroups: function() {
        return this.store.find('group');
    }.property()
});

EDIT: Forgot to mention, Ember v1.0.0, Ember-data v1.0.0-beta3

is the groups controller used anywhere else? Is it really an array controller, or is it just a controller with a property that's an array? — Kingpin2k
My groups controller is used for the groups/ route, I removed several 'actions' for this post since they weren't important. — Steve H.

Kingpin2k Kingpin2k · Accepted Answer · 2013-12-03T02:06:53

The error is complaining about the select mucking with your model (user.selectedGroups) before it's finished loading.

The reason none are selected is probably because they are probably different objects. You might iterate over each item in the selected items and the allGroups options and check out the ember guid on it, if they are different items then that's why it's not showing them as selected.

Just out of curiosity, can you try setting the controller in the application route's setupController?

App.ApplicationRoute = Em.Route.extend({
  setupController: function(controller, model){
    this._super(controller, model);

    this.controllerFor('groups').set('model', this.store.find('group'));
  }
});

{{view Ember.Select
            multiple="true"
            class="form-control"
            selectionBinding="selectedGroups"
            contentBinding="controllers.groups.model" //instead of allGroups
            optionLabelPath="content.name"
            optionValuePath="content.id"}}

Ember.Select works sometimes but assertion fails

1 Answers