How does this work with dynamic groups of radio buttons?

[hglattergotz]

trafficstars

I have a variable number of radio button groups in a list.

The only way I can see to handle the change event of a specific group is to give each group a unique value for the changed attribute and have a correspondingly named action in the controller.

By not knowing the number of groups or the names up front I don't see how this would work. I think in my case it would make more sense to have a single action handle all groups. But for this to work the sendAction would have to send not only the new value but maybe also the name so the controller logic can figure out which group the action came from.

Any ideas?

[tute]

@hglattergotz how did you solve this issue? I'm facing it right now, and thinking how to best solve it. Thanks!

[hglattergotz]

@tute I wrote a custom component

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  type: 'radio',

  attributeBindings: [
    'type',
    'name',
    'value',
    'checked',
    'selected'
  ],

  checked: Ember.computed('groupValue', 'value', function() {
    return this.get('groupValue') === this.get('value');
  }).readOnly(),

  change: function() {
    var value = this.get('value');
    var groupValue = this.get('groupValue');

    if (groupValue !== value){
      this.set('groupValue', value);
      this.sendAction('selected', this.get('name'), this.get('value'));
    }
  }
});

Template

<table class="table table-bordered table-striped">
    <thead>
    <th></th>
    <th>Yes</th>
    <th>No</th>
    <th>Don't care</th>
    </thead>
    <tbody>
    {{#each renderItems as |item|}}
        <tr>
            <td>{{item.question}}</td>
            <td>{{#radio-button value=1 name=item.id groupValue=item.answer selected="changed"}}Yes{{/radio-button}}</td>
            <td>{{#radio-button value=0 name=item.id groupValue=item.answer selected="changed"}}No{{/radio-button}}</td>
            <td>{{#radio-button value=null name=item.id groupValue=item.answer selected="changed"}}Don't care{{/radio-button}}</td>
        </tr>
    {{/each}}
    </tbody>
</table>

Controller

import Ember from 'ember';

export default Ember.Controller.extend({

  actions: {
    changed: function(name, value) {
      // handle change
    }
  },
 :

Hope it helps!

[tute]

Thank you!

[tute]

@hglattergotz doesn't your this.set('groupValue', value); mutate item.answer, violating DDAU, and presenting the same bug? Thanks!

[tute]

Added:

groupValue: Ember.computed('groupValue', function() {
  return this.get('attributeName');
}),

to the component to fix that.

[hglattergotz]

Cool, thanks!