设置Ember.Select默认选定值

Question

我试图通过设置产生的选择框的默认选择的值{{view Em.Select}}这应该是根据文档或者设置一个相当简单的任务valueBinding为适当的值或selecitonBinding由项表示的完整的对象。

此处的示例代码： http : //jsfiddle.net/p2dtx/2/

HTML

<script type="text/x-handlebars">

    {{outlet}}

</script>

<script type="text/x-handlebars" data-template-name="index">

    !{{dafaultOption}}!

    {{view Em.Select prompt="test" contentBinding="controllers.option.content" optionLabelPath="content.name" optionValuePath="content.id" valueBinding="dafaultOption" }}
</script>

JS

App = Ember.Application.create();

App.Store = DS.Store.extend({
    adapter: DS.FixtureAdapter
});

App.Router.map(function() {
  // put your routes here
});

App.IndexController = Em.Controller.extend({
    dafaultOption: 'OP2',
    needs:['option']  
});

App.Option = DS.Model.extend({ 
    name: DS.attr('string')
});

App.Option.FIXTURES = [
    {
        id: 'OP1',
        name: 'Option 1'
    },
    {
        id: 'OP2',
        name: 'Option 2'
    }
];

App.OptionController = Em.Controller.extend({
    init: function() {
        this._super();
        this.set('model', this.get('store').find('option'))
    }
})

注意页面加载之间的值！ 尽管在IndexController声明中将defaultOption设置为'OP2'，但它为空。 如果我从{{view Em.Select}}删除valueBinding选项，OP2将在!!之间输出。 如预期的那样，这使我相信，呈现选择时， indexController.defaultOption设置为null（提示选项）。 当我手动更改选择时，值将按预期更新。 有任何想法吗？

Answer 1

selectionBinding是在Ember.Select上设置的正确参数，但它应该是传递给它的contentBinding的数组中包含的项，因此像下面这样工作即可。

在您的App.OptionController上定义一个属性来保存所选项目：

App.OptionController = Em.Controller.extend({
  selectedOption: Ember.computed.alias('content.firstObject'),
  init: function() {
    this._super();
    this.set('model', this.get('store').find('option'))
  }
});

并将此属性设置为您的selectionBinding ：

{{view Em.Select 
  prompt="test" 
  contentBinding="controllers.option.content" 
  optionLabelPath="content.name" 
  optionValuePath="content.id" 
  selectionBinding="controllers.option.selectedOption" }}

工作演示 。

希望能帮助到你。

Answer 2

您会注意到模板中的dafaultOption为空白。 这是执行顺序的问题。 select的内容最初是空的，因此Ember.Select更新以选择匹配项（在这种情况下，因为没有加载而没有匹配项），并且dafaultOption更新为null 。 然后，您的数据将加载，并且由于dafaultOption为null ，因此未选择任何项目。

使用ID的有效演示： http ： //jsfiddle.net/eZWXT/

或者，您可以使用使用对象相等性的直观像素演示。