Question

我试图在Ember.select视图上预选一个值。我的选择工作正常，但我不知道如何动态预选一个值 - 或者目前是不是可以使用Ember 1.8-beta和Ember Data Beta-11？

这是我的选择：

{{view select
  class="uk-width-1-1"
  content=services
  optionLabelPath="content.name"
  optionValuePath="content.id"
  prompt="Service"
  selectionBinding="selectedService"
}}

当我尝试使用this.get('selectedService')获取当前活动值时它工作正常，但是当我尝试在我的控制器中设置特定客户时（例如预先填充编辑表单），没有任何反应：

var service = timetracking.get('service');
this.set('selectedService', service);

这些是我的模特：

App.Timetracking = DS.Model.extend({
  duration:  DS.attr('number'),
  day:       DS.attr('date'),
  notice:    DS.attr('string'),
  project:   DS.belongsTo('project', {async: true}),
  service:   DS.belongsTo('service', {async: true}),
  user:      DS.belongsTo('user', {async: true})
});

App.Service = DS.Model.extend({
  name:           DS.attr('string'),
  description:    DS.attr('string'),
  timetrackings:  DS.hasMany('timetracking', {async: true}),
  archived:       DS.attr('boolean')
});

Answer 1

所以你设置了选择框的值，通过设置＆＃34; selectedService＆＃34;到您想要选择的实例

http://emberjs.jsbin.com/vuhefa

你好像在做同样的事情

var service = timetracking.get('service');
this.set('selectedService', service);

但是由于服务是异步关系，它会返回一个承诺，因此不是正确的实际模型尝试这个insted

var context = this;
var service = timetracking.get('service').then(function(service){
  context.set('selectedService', service);
});

规则是异步关系返回promise并且嵌入式关系返回对象

Answer 2

在您的模板中，只需使用控制器/模型中的service，如下所示：

{{view select
  class="uk-width-1-1"
  selection=service
  content=services
  optionLabelPath="content.name"
  optionValuePath="content.id"
  prompt="Service"
}}

selection选项指定用于填充初始选择的属性。它将使用该对象以及optionLabelPath和optionValuePath来配置DOM中的<select>元素。

当用户选择某个选项时，将更新相同的selection属性，即您的控制器/型号上的service。

重要提示：由于您在模型上使用异步belongsTo作为service关系，因此您需要帮助select视图使用表示关系的promise代理的内容。

通过在控制器上使用别名来执行此操作：

App.TimetrackingController = Ember.ObjectController.extend({
  service: Ember.computed.alias('content.service.content')
});

Ember issue上还有更多内容。

如何在Ember.select视图上预选值

2 个答案: