Skip to content

Instantly share code, notes, and snippets.

@gustaff-weldon
Last active March 1, 2017 19:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gustaff-weldon/ecda533811e43db14697 to your computer and use it in GitHub Desktop.
Save gustaff-weldon/ecda533811e43db14697 to your computer and use it in GitHub Desktop.
Ember input-radio and radio-group
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
options: [
{ name: 'Apple', value: 'apple'},
{ name: 'Banana', value: 'banana'},
{ name: 'Other', value: 'other'}
],
selected: { name: 'Banana', value: 'banana'},
actions: {
setSelected(value) {
console.log('setSelected',arguments)
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{radio-group label="Favourite fruit" options=options selected=selected onchange=(action (mut selected))}}
<br>
Selected: {{selected.name}}
<br>
-------------------------------
import Ember from 'ember';
export function eq(params/*, hash*/) {
return params[0].value === params[1].value
}
export default Ember.Helper.helper(eq);
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'input',
type: 'radio',
attributeBindings: [
'checked',
'name',
'type',
'value'
],
change() {
this.sendAction('onchange', this.get('value'))
},
});
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
onchange(value) {
const index = value
let selected = this.get('options')[index]
this.get('onchange')(selected)
}
}
});
<label>{{label}}</label>
{{#each options as |option index|}}
<label>
{{input-radio name=elementId value=index checked=(eq option selected) onchange=(action "onchange")}}
{{option.name}}
</label>
{{/each}}
{
"version": "0.6.5",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.0/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment