Customizing Ember Select Option Label

Question

I want to display list of available candidatos as a dropdown, so I use Ember.Select:

{{view "select" content=candidatos optionValuePath="content.id" 
  optionLabelPath="content.nombre" prompt="Seleciona un candidato..." 
  selection=selectedCandidato}}

An instance of "candidato" has this structure:

{id: ..., nombre: ..., confirmado: ...}

Then, here comes an additional requirement: "if confirmado is true, show * next to the name of the candidato".

So... optionLabelPath="content.nombre" no longer works for this. I don't want to pollute the model either (by creating a computed property in the candidato class just for this requirement).

Currently I'm doing it by creating a list of "markedCandidatos" in the controller, built from the original candidatos list. Like this:

{{view "select" content=candidatoMarkeds optionValuePath="content.id" 
  optionLabelPath="content.nombreMarked" prompt="Seleciona un candidato..." 
  selection=selectedCandidatoMarked}}

But it's very clumsy, because I need to keep track of the change of selectedCandidatoMarked in the controller, and doing lookup in the original candidatos list, find a matching one, and set the "selectedCandidato" property of the controller with that matching object. I don't like it, too much code for a simple requirement like this.

So, I'm looking for a way to customize Ember.Select. I specifically need a way to customize how each option in the select is rendered.

Frankly this page falls short on that: http://emberjs.com/api/classes/Ember.Select.html . I've been googling around, haven't came across a straightforward explanation for this.

I'd really appreciate some help here.

Thanks, Raka

UPDATE: Keeping possibly-related links around:

score 0 · Answer 1 · answered Feb 16 '15 at 14:34

0

I don't want to pollute the model either (by creating a computed property in the candidato class just for this requirement).

This sounds like your best bet. Remember, that you are not actually saving this new property to the DB or anything like that, so it's really not that big of a deal, IMHO.

answered Feb 16 '15 at 14:34

Kalman

8,001
1
27
45

I just figured out how (link #1 in my original post gives the clue): ... so I have to make a custom view, extending Ember.Select, and specify the optionView for it. I will add the code in my original post for the formatting. – Cokorda Raka Feb 16 '15 at 16:22
the question is - is all that worth it vs. throwing in a computed property in your model? ;) – Kalman Feb 16 '15 at 16:25

score 0 · Answer 2 · answered Feb 16 '15 at 16:26

Create a custom view that extends Ember.Select, and specify optionView for it. Put the formatting logic in the template associated with that optionView. You may need to register bound helper (handlebar):

The custom select:

import Ember from 'ember';

export default Ember.Select.extend({
  optionView: Ember.SelectOption.extend({
    templateName: 'views/candidato-option'
  })
});

The optionView template:

{{candidato-marked view.content}}

The helper:

Ember.Handlebars.registerBoundHelper('candidato-marked', function(candidato) {
  if (candidato == undefined) return undefined;
  return candidato.nombre + (candidato.confirmado? ' (*)' : '');
});

I'm using Ember-CLI btw.

Customizing Ember Select Option Label

2 Answers2