Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
input-and-select-bug
import Ember from 'ember';
export default Ember.Component.extend({});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
data: [
{
checked: true,
label: 'active'
},
{
checked: false,
label: 'archived'
}
],
options: [
{
label: 'Option 1',
key: 'option1',
},
{
label: 'Option 2',
key: 'option2',
},
{
label: 'Option 3',
key: 'option3',
},
],
actions: {
changeState() {
const newData = this.get('data').map((d) => {
return {
...d,
checked: true
}
});
this.set('data', newData);
},
changeSelectValue() {
this.set('selected', 'option3');
}
}
});
import Ember from 'ember';
export function eq(params/*, hash*/) {
return params;
}
export default Ember.Helper.helper(eq);
<h1>Welcome to {{appName}}</h1>
<br>
<h3>Checkbox value should be in sync</h3>
{{#each data key="checked" as |state|}}
{{checkbox-component label=state.label checked=state.checked changeState=(action "changeState")}}
{{/each}}
<h3>Select value should be in sync</h3>
{{select-component value=selected options=options onChange=(action "changeSelectValue")}}
<input type="checkbox"
name="state"
id={{label}}
checked={{checked}}
onchange={{action changeState}}
/>
<label for="active">{{checked}}</label>
<select onchange={{action onChange}}>
{{#each options as |opt|}}
<option value={{opt.key}} selected={{eq opt.key value}}>{{opt.label}}</option>
{{/each}}
</select>
Value: {{value}}
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.