CODEWITHSUNDEEP
ember.js
outside2344
outside2344

Reputation: 2105

Ember.Select not setting default value correctly

I've read all the tests twice, the documentation three times, and I still am not sure I understand how to use Ember.Select the right way. I have what I think is a pretty simple case:

I have a string value in a model object (goal_type) that I want to bidirectionally bind to a select and have that select default to the starting value of the goal_type field. A couple of questions:

  1. I can't get the select to accept the initial goal_type of the model.
  2. All of this seems way too complex - there must be an easier way to do this than setting up an observer to modify the state of the original controller.

Help - I'm going crazy trying to figure this out.

Azul.goalController = Ember.Object.create({

     loadGoal: function(data) {
       this.set('content', Azul.store.loadAll(Azul.Goal, data));
     },

     newGoal: function() {
       goal = Azul.store.createRecord(Azul.Goal, {goal_type: "type2"});
       this.set('content', goal);
       Azul.selectedGoalTypeController.selectGoalType(goal.get('goal_type'));
     }

    });

    Azul.selectedGoalTypeController = Ember.Object.create({
      selectedGoalType: null,

      selectedGoalTypeChanged: function() {
         Azul.goalController.content.set('goal_type', this.selectedGoalType.value);
      }.observes('selectedGoalType'),

      selectGoalType: function(goal_type) {
         Azul.goalTypesController.content.forEach(function(item, index, self) {
           if (goal_type == item.value) {
               self.set('selectedGoalType', item);
           }
         });
      }
    });

    Azul.goalTypesController = Ember.ArrayController.create({
        content: [
            {value: 'type1', label: 'Type 1'},
            {value: 'type2', label: 'Type 2'}
        ]
    });

Upvotes: 0

Views: 857

Answers (1)

Luan
Luan

Reputation: 402

You have to set the value to the object bound to the select option, not to the value. Here:

Azul.selectedGoalTypeController.selectGoalType(goal.get('goal_type'));

Just do:

Azul.selectedGoalTypeController.set('selectedGoalType', goal);

By the way, your question seemed a little confuse. Sorry if I misunderstood you. I made a simple sample of how to use Select, here is the fiddle: http://jsfiddle.net/Qpkz5/300/

Upvotes: 1

Related Questions