Can I debounce a checkbox input in Aurelia?

Question

I'm trying to use the debounce binding behaviour on a list of checkboxes, but it doesn't seem to be working the way I expect (I'm not sure if you can even debounce a checkbox):

<label repeat.for="v of values">
  <input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>

clicking on any of the checkboxes results in the checkedVal array updating immediately, whereas it works as I expect for a normal input:

<input type="text" value.bind="textVal & debounce:1000"/>

Can I debounce a checkbox input?

Here's the full code, with a GistRun here. app.html:

<template>
  <h1>Checkbox bind debounce</h1>
  <form>
    <label for="text">text input with debounce:1000 </label>
    <input type="text" value.bind="textVal & debounce:1000"/>
    <div repeat.for="v of values">
      <br/>
      <label>
        <input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
      </label>
    </div>
  </form>
  <br/>
  <p>Text value: ${textVal}</p>
  <p>Checked values:</p>
  <p repeat.for="v of checkedVal">${v}</p>
</template>

app.js:

export class App {
  values = [1, 2, 3];
  checkedVal = [];
}

Thanks!

Answer 1

At this time, it's not supported. The debounce binding behavior controls the rate at which the checkedVal property is assigned. In a checked binding, the property isn't assigned, the array instance referenced by the property is mutated with push and splice which circumvents the debouncing in the binding expression.