Ember js select default value not working

Question

I want to auto-populate the dropdown with categories from another model. It's showing up but the default value is not working. Here are the two models:

App.Task = DS.Model.extend({
  category_id : DS.attr('number'),
  title       : DS.attr('string'),
  ...
  category    : DS.belongsTo('category', { async : true })
});

App.Category = DS.Model.extend({
  name        : DS.attr('string'),
  ...
  tasks       : DS.hasMany('task', { async : true })
});

Here's my route:

App.Router.map(function () {
   this.resource('tasks', { path : '/tasks'}, function () {
       this.resource('task', { path: '/:task_id' }, function( ) {
           this.route('edit');
       });
       ...
    });
    ...
});

Here's the controller:

App.TaskController = Ember.ObjectController.extend({
  isEditing: false,
  needs: ['categories'],
  categoriesDropdown : function() {
     return this.store.find('category');
  }.property(),
  ...
});

I have a button to toggle between edit mode. When in edit mode, the dropdown is populated but the default value is not. I used the Ember inspector the value bind is working 'cause if I choose an option, the category_id also changes.

{{view Ember.Select contentBinding="categoriesDropdown" 
optionValuePath="content.id" optionLabelPath="content.name" 
valueBinding="category_id" class="form-control select-chosen" 
prompt="No category selected"}}

I also tried binding it directly to the category but the category is set to null upon loading, and if I try changing the option, the category changes but the select option is not changed.

{{view Ember.Select contentBinding="categoriesDropdown" 
optionValuePath="content.id" optionLabelPath="content.name" 
selectionBinding="category" class="form-control select-chosen" 
prompt="No category selected"}}

The bind is working but the select/dropdown is not updated.

NicholasJohn16 NicholasJohn16 · Accepted Answer · 2014-08-22T03:47:39

Try it like this:

{{view Ember.Select content=categoriesDropdown
                optionLabelPath="content.name"
                optionValuePath="content.id"
                classNames=["form-control","select-chosen"]
                prompt="No category selected"
                selection=selectedCategory}}

You should then be able to select the current selection as the selectedCategory property of your controller.

Ember js select default value not working

1 Answers