dimanche 15 février 2015

Customizing Ember Select Option Label

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://ift.tt/1kHLFnV . 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:



  1. Ember.Select with an unbound options list





Aucun commentaire:

Enregistrer un commentaire