Passing 2 values at the same time to a checkbox action (3.4)

1

I want to pass an ID and the state of a checkbox to it’s onChange action. I succesfully can pass the checked state :

{{input type='checkbox' change=(action "selectProduit" value="target.checked") }}

And I can successfully pass the ID value:

{{input type='checkbox' change=(action "selectProduit" id)}}

When I try to pass them both, I end up with an undefined value for id

How can I pass them both ?

2

Since you’re on 3.4 and can’t refactor i’d recommend unpacking the value e.g. target.checked inside your action handler instead of using the action value= arg. Then you could receive both the change event and curry in the id like in your second example.

You could also try using the pick helper from ember-composable helpers, something like:

{{input type='checkbox' change=(pick "target.checked" (action "selectProduit" id))}}

And you could also abstract each checkbox into its own component and let the component manage the args it passes back out:

{{!-- my-checkbox.hbs --}}
{{input type='checkbox' change=(action "onChange" value="target.checked") }}

// my-checkbox.js
...
actions: {
  onChange(checked) {
    // sorry if this is the wrong syntax i don't remember super well
    this.sendAction("onChange", checked, this.id);
  }
}

{{!-- invocation of your component --}}
{{my-checkbox id=id onChange=(action "selectProduit")}}
1 Like
3

@bsylvain, could you show us the code you used when you say that trying to pass both does not work, please? Maybe we could see straight away why, maybe your approach is actually correct but is lacking a last tweak.

For example, here’s a scenario where you can pass two (or more, if you wanted) arguments into a checkbox action: Ember Twiddle

The key could be passing everything down as a hash (i.e. an object):

{{input
  type='checkbox'
  change=(
  	action "selectProduct" (hash value="target.checked" id="my-id")
  )
}}
4

The issue with that comes from the fact that value="target.checked" is a named arg for the action helper and not something that needs to be passed to the action, so if you put it in a hash it would be ignored and the action would get two args: the whole raw change event (and not the extracted target.checked value) and a hash with value and id keys. In that case you might as well just not bother with the hash or the value= arg and just unpack the value from the event in the handler itself.

5

I see the problem now, thank you @dknutsen! As you mentioned, probably the best way is to do it is to unpack the keys you want from the target, like here: Ember Twiddle (updated link)

{{input type='checkbox' change=(action "selectProduit" value="target")}}

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class extends Component {
  @action
  selectProduit({ id, checked }) {
    // Now you have access to `id` and `checked`
    // by deconstructing `target`
  }
}
6

Thanks, I used your solution and created an additional checkbox component.

1 Like