Skip to content

Instantly share code, notes, and snippets.

@sukima
Created July 28, 2021 15:43
Show Gist options
  • Save sukima/1780a8fd7b26b7e927193e5746c8b3e0 to your computer and use it in GitHub Desktop.
Save sukima/1780a8fd7b26b7e927193e5746c8b3e0 to your computer and use it in GitHub Desktop.
Vanilla Select in out-of-box Ember
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ApplicationController extends Controller {
@tracked selected = 2;
get isSelected() {
// The {{get}} helper will coerce values to strings. Thus
// an POJO lookup works even if the type is a number.
return { [this.selected]: true };
}
@action
update({ target }) {
// This is where you convert a string version of the data
// to the type associated with the data. In this example
// it is a number associated to the index of the options
// array used in the {{#each}} block. It could easily be
// a model ID.
this.selected = parseInt(target.value, 10);
}
}
{{#let (array "One" "Two" "Three" "Four") as |options|}}
<h1>Selected: {{get options this.selected}}</h1>
<select {{on "change" this.update}}>
{{#each options as |label index|}}
{{! index is a number but assigning to an HTML attribute will coerce it to a string }}
<option value={{index}} selected={{get this.isSelected index}}>{{label}}</option>
{{/each}}
</select>
{{/let}}
{
"version": "0.17.1",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment