Change.trigger not being called on filtered array in template

1

I have a simple list in my viewmodel

list = [
    { name: 'One', active: false },
    { name: 'Two', active: true },
    { name: 'Three', active: true },
    { name: 'Four', active: false },
    { name: 'Five', active: false },
  ]

In the corresponding template, I want to display the list 3 times.

  1. All active = true items
  2. All active = false items
  3. All items

These are all checkboxes with a change.trigger="onChecked()" event bound to them.

Now, the problem is that onChecked() never gets called for the first two lists, which are added to the template like this:

  • repeat.for="item of list.filter(d => d.active)"
  • repeat.for="item of list.filter(d => !d.active)"

For the third list that gets added like this:

  • repeat.for="item of list"

Everything works as expected

<div>Active Elements in list</div>
<div style="margin-bottom: 20px">
  <div repeat.for="item of list.filter(d => d.active)">
    <input
      type="checkbox"
      checked.bind="item.active"
      change.trigger="onChecked()"
    />
    - ${item.name}
  </div>
</div>

<div>Non Active Elements in list</div>

<div style="margin-bottom: 20px">
  <div repeat.for="item of list.filter(d => !d.active)">
    <input
      type="checkbox"
      checked.bind="item.active"
      change.trigger="onChecked()"
    />
    - ${item.name}
  </div>
</div>

<div>All Elements in list</div>

<div>
  <div repeat.for="item of list">
    <input
      type="checkbox"
      checked.bind="item.active"
      change.trigger="onChecked()"
    />
    - ${item.name}
  </div>
</div>

Here is a live example:

In the example, clicking on any checkbox should make an alert pop up. However, this is not the case, for some reason the alert only pops up when clicking on the checkboxes on the “All Items” list.

If all the change.trigger are changed to click.trigger it also works as expected.

1 Like
2

My understanding is it seems related to the way bindings are order and the sequence of the change handling. When change happens, because of the .filter(d => d.active), the repeat may remove/add the checkbox, causing its event handlers like change handler not firing.

3

Interesting. Thanks for the response. Does that mean that this is not really a bug but the intended behaviour?