Binding to child array

Best Practices
1

Hey everyone,

I am trying to figure out a good way to handle this situation.

I have a ParentElement which displays a list. In the VM, I have filters = [ ] which is an array of strings that I use to determine the filters to be applied to the list. I also have a ChildElement, which I use to chose available filters. The ChildElement’s VM has @bindable filters = [ ] and I use two-way binding between the parent’s and child’s filters arrays.

My problem is that, sometimes I want to modify the filters like clear the items, remove a single element from the middle or assign the content of another array to filters. However, if I use approaches like filters = [...anotherArray] or filters = [ ] or filters = filters.filter(...) I realize that the connection between the child filters and parent filters disappears. I believe it is because the reference to the original array is lost with the above-mentioned operations. What I want to know is, is there a preferred way to handle such situations? Should I just switch to event handlers? Is my approach fundamentally incorrect?

Any tips and pointers are appreciated.

1 Like
2

Regarding the filters, if you want to clear them, you could do

filters.splice(0, filters.length)

If you want to replace them with the contents of another array, this could work:

filters.splice(0, filters.length, ...anotherArray)

In both cases, the reference to the filters bindable is preserved.

Regards.

5 Likes