Skip to content

Instantly share code, notes, and snippets.

@ef4
Last active October 7, 2021 09:41
Show Gist options
  • Star 25 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ef4/8367f996eb7b57d1f7a5 to your computer and use it in GitHub Desktop.
Save ef4/8367f996eb7b57d1f7a5 to your computer and use it in GitHub Desktop.
Goodbye old Select View
<select onchange={{action (mut vehicle) value="target.value"}}>
{{#each vehicles key="@item" as |vehicleChoice|}}
<option value={{vehicleChoice}} selected={{eq vehicle vehicleChoice}}>{{vehicleChoice}}</option>
{{/each}}
</select>
@ef4
Copy link
Author

ef4 commented Jun 15, 2015

@balinterdi
Copy link

@ef4 Looks great, are there some docs available on what can be used as key in the #each helper? I've so far seen "@Index" and "@item" (I think) but it would be great to understand how the magic works. Thank you.

@KTKate
Copy link

KTKate commented Jun 15, 2015

You can just use key="@guid" everywhere for now. There isn't much documentation but the different key values depend on the type of item being iterated over. If they don't have a unique identifier then @Guid will generate one, if they do have a unique identifier then @Guid will use that. There is a pr to make hbs default to the appropriate key so you don't have to set it yourself.

Most of the explanations about this that I've seen were just on Slack.

@ZackMattor
Copy link

Trying to use this example... but i don't think the eq is working for me.. in that example i tried testing it by making it the text in the select box (both the values seem to be the same but it never triggers that they are equal)

https://gist.github.com/Criten/cb0c886ab0deb4f4ee7a/edit

@ZackMattor
Copy link

It was my bad! my menuable_id was numeric... so i just changed it to a string and it worked. It should work for me because all ids within ember are strings anyways....

@krivaten
Copy link

Haven't tried this out on my end yet, but was just curious. If target.value is already set, will it automatically select the value when the view renders?

@elbeezi
Copy link

elbeezi commented Sep 10, 2015

@jkgisme:

DEPRECATION: Using '@guid' with the {{each}} helper, is deprecated. Switch to '@identity' or remove 'key=' from your template.

(Ember 1.13.6)

@shayanypn
Copy link

shayanypn commented Dec 14, 2016

amazing job. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment