CODEWITHSUNDEEP
javascripthtmlember.js
Bob
Bob

Reputation: 451

How can I use Ember.Select ? How can I set default selected item?

I am using ember.select. I was trying to set value dynamically. But it's not working for me. I attached my sample code.

Help me to solve this problem.

This is my Handlebar template Hbs:-

{{view Ember.Select
    contentBinding="dropDown"
    optionValuePath="content.id"
    optionLabelPath="content.value"
    selectionBinding="obj3"   //This is the object am trying to set dynamically. I defined my object in below
}}


//View Model - This is my view model. This model gives the dropdown list
App.MyModel = Em.Object.extend({
    id:{
       },
    dropDown:[
      {id:"1",value:"test1"},
      {id:"2",value:"test2"},
      {id:"3",value:"test3"}
    ]
});

// Model - Here is my data model. I want to update obj3 with dropdown list value.
DataModel = Em.Object.extend({
    obj1:"",
    obj2:"",
    obj3:null
});

// Create obj. Initially am trying to set default value for my dropdown.

var dataModel = DataModel.create({
    obj1:"value1",
    obj2:"value1",
    obj3:{id:"1",value:"test1"}
})

Upvotes: 3

Views: 2289

Answers (1)

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

You have to keep the selected value somewhere in your application, and set the valueBinding of Em.Select to that path, for example:

window.App = Em.Application.create()

App.ApplicationRoute = Em.Route.extend({
    model: function() {
        return [
            {id: 1, text: "ein"},
            {id: 2, text: "zwei"},
            {id: 3, text: "polizei"}
        ];
    }
});

App.ApplicationController = Em.ObjectController.extend({
    selected: 2 // will select "zwei"
});

In the ApplicationController above, I've created a property selected that keeps the id of the object I want to dynamically select in the combo, then in my template I set the binding as follows: 

<script type="text/x-handlebars">
    {{view Ember.Select contentBinding="content" 
           optionLabelPath="content.text"
           optionValuePath="content.id"
           valueBinding="controller.selected"}}
</script>

You can see a working fiddle here http://jsfiddle.net/schawaska/zfVP8/

Upvotes: 1

Related Questions