Creating radio buttons or something similar

Design
1

I have a form that creates a model with an attribute set to private or public, similarly to the way you select between private and public using radio buttons on https://github.com/new. I would like to implement this using something similar to radio buttons where all options are visible. However, radio buttons does not seem to be supported in ember.

Is there a recommended way to implement form input where all options are visible and only one can be selected?

2

Was about to try and write this myself, but googled and lo and behold there’s this.

So for instance you might have in your template:

{{view App.RadioButton selectionBinding="isPublic" value="1"}} Public
{{view App.RadioButton selectionBinding="isPublic" value="0"}} Private

Could also make this into a component, it’s a bit behind the times to have it as a view.

3

The solution you posted seems promising, but an official solution is in the works. I did some more research today and a pull request introducing radio button support was submitted to ember core in https://github.com/emberjs/ember.js/pull/4352. However, in the last core meeting they decided that this should be factored out into a bower addon until it matures. Seems like no-one has done the work to create the addon yet, but it has only been a little over a week yet.

4

I’ve implemented the view-solution with great success.

But I’d like to have a label element below each radio-button with the for attribute set to the radio-button’s ID (to be able to style the radio-button) - how could I pass the radio-button ID to an adjacent label element?

5

What if you wrapped a <label> around the radio button instead? Then maybe use an inner <span> for extra styling to position it below the radio if needed. Based on the Bootstrap {{link-li}} component, I’ve created an {{input-label}} component to grab the checked status of the radio and apply the active class to the label element (not that you necessarily need that).

App.InputLabelComponent = Ember.Component.extend({
    tagName: 'label',
    classNameBindings: ['checked:active','disabled'],
    checked: function(){
        return this.get('childViews').anyBy('checked');
    }.property('childViews.@each.checked'),
    disabled: function(){
        return this.get('childViews').everyBy('disabled');
    }.property('childViews.@each.disabled')
});
1 Like
6

I believe you just set the id yourself

{{view App.RadioButton id="whatever"}}

And then you can just set your label’s for attribute to the same id.

Example is here, notice that you can click either the radio button or the word next to it (since I made the word a label).

1 Like
7

I had trouble getting this to work in a phonegap project. Above solution does not seem to work on either Android or iOS.

Workaround I came up with:

view/forms/radio-button.js

import Em from 'ember';
export default Em.View.extend({
  templateName: 'forms/radio-button',

  didInsertElement: function () {
    this.$radio = this.$().find('input');
  },

  actions: {
    clickRadio: function () {
      this.$radio.prop('checked', true);
      this.set('selection', this.get('value'));
    }
  }
});

templates/forms/radio-button.hbs

<label class="check-radio" {{action clickRadio on="click" target="view"}}>
  <input type="radio" {{bind-attr name="view.name" value="view.value"}} />
  &nbsp;{{view.labelText}}
</label>

**/*.hbs

{{view 'forms/radio-button' selectionBinding="aaa" name="bbb" value="ccc" labelText="ddd"}}
8

Hey everyone,

I’ve been stung by the problem with radio buttons quite a few times in the past now so I thought I’d make an ember-addon using the latest implementation. If you want to check it out and let me know what you think that would be great: ember-radio-buttons - npm

9

FellowMD’s implementation is nice; I’ve built my solution based on it. I agree with nathanhammond that the interface should be similar to html and consistent with other Ember input components, i.e. similar to

{{ input type='text' value=value }}

The problem here is that where other inputs have a single value, the radio input has both an individual value and a group value. What value means was not clear enough for me in any of the other solutions I’ve seen, so I wrote my own:

{{ radio-button name='dish' value='spam' groupValue=selectedDish }}
{{ radio-button name='dish' value='eggs' groupValue=selectedDish }}

I’ve wrapped it up in a single file solution (!) – a templateless component (though, as of now, we still need an empty template file).

10

Is selectionBinding a built in thing or is it automatically converted to something like a bind-attr ? I see a test in the code that refers to it as ‘the old binding syntax’

11

Answered my own question Ember - 4.6 - Ember API Documentation