How can I use Ember.Select? How do I set the selected item as default?
I am using ember.select. I tried to set the value dynamically. But that doesn't work for me. I have attached my sample code.
Please help solve this problem.
This is my Handlebar Hbs template: -
{{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"}
})
source to share
You have to store the selected value somewhere in your application and set that path to valueBinding
of Em.Select
, 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 created a property selected
that stores the id
object that I want to dynamically select in a combo, then in my template I set the binding like this:
<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/
source to share