CODEWITHSUNDEEP
ember.jsember-data
Slevin
Slevin

Reputation: 4222

How to preselect a value on an Ember.select view

I'm trying to preselect a value on an Ember.select view. My select works fine, but I don't know how to preselect a value dynamically - or isn't it possible at the moment with Ember 1.8-beta and Ember Data Beta-11?

This is my select:

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

It works fine when I try to get the current active value with this.get('selectedService'), but when I try to set a specific customer in my controller (e.g. to pre-fill an edit form), nothing happens:

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

These are my models:

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

Upvotes: 1

Views: 730

Answers (2)

Andrew Hacking
Andrew Hacking

Reputation: 6366

In your template can simply use service from your controller/model as follows:

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

The selection option specifies the property to use for populating the initial selection. It will use that object along with optionLabelPath and optionValuePath to configure the <select> element in the DOM.

When an option is chosen by the user, that same selection property will be updated, ie service on your controller/model.

IMPORTANT: Since you are using an async belongsTo for the service relation on your model, you need to help the select view to use the content of the promise proxy representing the relationship.

Do this by using an alias on your controller:

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

There is an more on this over on the Ember issue.

Upvotes: 1

Billybonks
Billybonks

Reputation: 1568

so you set the value of the select box, by setting "selectedService" to the instance that you want to have selected

http://emberjs.jsbin.com/vuhefa

you seem to be doing the same thing

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

but since service is an async relationship it will return a promise and therefore not be the correct actual model try this insted

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

its a rule that async relationships return promises and embedded relationships return objects

Upvotes: 1

Related Questions