Ember data and pre-selecting select boxes

I am try to preselect a select box based on data that is in the model. e.g

{{view “select” content=categories selectionBinding=selectedOption optionValuePath=“content.id” optionLabelPath=“content.caption”}}

({{model.category_id}})

The categories array is a list of { id:2, caption:“my caption” }. It shows correctly and is just an array in the controller, that was set by the afterModel hook in the item route.

The category ID is stored in my model as “category_id” and I was hoping to be able to do something selectionBinding=model.category_id but this does not work.

The solution in the end was hacky, I set up a controller computed property "selectedOption"that searches in the categories array for that category_id and then returns the instance, as you can see I’ve set selectionBinding=selectedOption.

It seems crazy to me that I can’t put a value into the tag to just select the value automatically when it loads in the item template.

Any ideas for a simpler way?

I believe if your model just holds an id number at model.category_id then you should use value=model.content_id rather than selectionBinding=selectedOption

The “Content Property (Array Of Objects)” section here Ember - 4.6 - Ember API Documentation uses the value property for binding an id, and the selection property to bind an actual object.

1 Like

The select helper has a few issues and is apparently due for an overhaul at some point in the 2.x life cycle. I ended up making my own component to handle selects as I could never get the select helper to preselect reliably with data from promises.

Yeah, it definitely doesn’t handle promises!

I’ve actually not had any problems using it, but I always resolve the promises in the route’s model hooks before using them in a select helper.

Glad you found a solution that works for you.

Actually in the end it turned out to be my fault, the server had a mysql statement that was getting confused with a particular field due to a left join switching the field to null and not null.

Doing a simple bind of value to the field name did the trick. Sorry for wasting your time.

{{view “select” content=categories2 value=model.category_id2 optionValuePath=“content.cat_id” optionLabelPath=“content.caption”}}

Did the trick.