How to call a function on uncheck and on check with Aurelia

Question

I have a list of items coming in from an API and they won't always be the same, so the number of items in the array is always changing. I'm creating a checkbox for each item.

The user has the ability to check/uncheck each item. Here's what I want to do:

1. When an item is checked, it will push the ID of that item into an array
2. When an item is unchecked, it will remove the ID of that item from the array

I just need to know how I call something based on whether it was checked or unchecked. I've tried a "checked.delegate" and a "checked.trigger" and I can't seem to get that to work.

Just a regular click.delegate won't work because I can't keep state on whether it's true or false and I can't set variables for all of them because I don't always know which items are going to be coming in from the API. Any suggestions?

Answer 1

Try change.delegate or change.trigger like this:

VM method:

logchange(value) {
  console.log(value);
}

View:

<input type="checkbox" change.delegate="logchange($event.target.checked)" />