我怎样才能使用Ember.Select?如何设置默认选定项?

时间:2013-02-17 08:16:20

标签: javascript html5 ember.js

我正在使用ember.select。我试图动态设置值。但这对我不起作用。我附上了我的示例代码。

帮我解决这个问题。

这是我的Handlebar模板 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"}
})   

1 个答案:

答案 0 :(得分:1)

您必须将所选值保留在应用程序中的某个位置,并将valueBinding Em.Select设置为该路径,例如:

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"
});

在上面的ApplicationController中,我创建了一个属性selected,用于保存我想要在组合中动态选择的对象的id,然后在我的模板中设置绑定如下:

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

你可以在这里看到一个工作小提琴http://jsfiddle.net/schawaska/zfVP8/