2

我正在尝试设置生成的选择框的默认选定值,{{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'))
    }
})

注意页面加载之间的值!! 为空,尽管defaultOption在 IndexController 声明中设置为“OP2”。如果我从OP2 中删除该valueBinding选项,则在 !! {{view Em.Select}}as expected, which leads me to believe that when the select is being rendered it is setting the indexController.defaultOptionto null (prompt option). 当我手动更改选择时,值会按预期更新。有任何想法吗?

4

2 回答 2

3

是在 a 上设置的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" }}

工作演示

希望能帮助到你。

于 2013-09-13T23:07:11.183 回答
2

您会注意到dafaultOption模板中的您是空白的。这是执行顺序问题。选择的内容最初是空的,因此Ember.Select选择匹配项的更新(在这种情况下,没有匹配,因为没有加载)并dafaultOption更新为null. 然后加载您的数据,并且按原样dafaultOptionnull选择任何项目。

使用 id 的工作演示:http: //jsfiddle.net/eZWXT/

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

于 2013-09-17T14:14:31.597 回答