jeudi 28 janvier 2016

Set default (selected) option Ember 1.13.11

Sort version:

Why does this work: <option disabled={{option.isSelected}}>

But not this: <option selected={{option.isSelected}}>

Long version:

This is more about me learning how Ember works than about getting this working, since there are lots of working examples for this already.

I'm trying to set the default selected option in a select menu. It looks like there are different ways of doing this and that the recommended method is changing.

I'm working in Ember 1.13.11 but want to be Ember 2.0 compatible.

I haven't found a Ember 2.0 compatible method that didn't involve a template helper for the selected attribute. I can create a true/false value as a property on the controller. I know I'm doing it right because disabled works properly. Why does this fail only for select?

Template call:

{{version-details item=version status=version.status}}

Component controller:

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'select',
  options: Ember.computed('status', function() {
    var statusOptions = ['beta', 'current', 'future', 'retired-beta', 'retired', 'unknown'];
    var selected = this.get('status');
    var optionsData = [];
    statusOptions.forEach( function(status){
      var isSelected = (selected == status);
      optionsData.push({ status: status, isSelected: isSelected });
    })
    return optionsData;
  }),
  setAction: '',
});

Component:

{{#each options as |option|}}
  <option selected={{option.isSelected}}>{{option.status}}</option>
{{/each}}




Aucun commentaire:

Enregistrer un commentaire