Binding to an array by index causes dirty checking

[sylvain-hamel]

We used to be able to bind ${myArray[0].foo} without triggering dirty checking. This now causes dirty checking.

A breakpoint in DirtyCheckProperty.prototype.subscribe reveals that this.obj is the array and this.propertyName is 0. I don't know exactly when this new behavior was introduced.

[EisenbergEffect]

To my knowledge, this was always the behavior. @jdanyow can confirm. It may have worked without dirty checking in Chrome only, back when Array.observe was a spec. Now that it is no longer being standardized, it has been removed.

Fundamentally, without Array.observe, there is no way to detect changes in indexed items of arrays without dirty checking.

@jdanyow may have some recommendations on alternatives though.

[sylvain-hamel]

I spoke with @jdanyow in a private gitter and he asked me to log this issue.

I only use Chrome at this stage so you might be right that it only worked with Chrome.

This is not an important feature for us. We rewrote our code in a way that does not bind to an array by index.

[EisenbergEffect]

@jdanyow I think, minimally, the new databinding docs should probably call out the things that will cause dirty checking and maybe even provide various workarounds for that, if possible.

[jdanyow]

Early on AccessKeyed didn't observe foo.bar when the binding expression was foo[baz] (baz === 'bar').

Now it does: https://github.com/aurelia/binding/blob/master/src/ast.js#L320

I think we may need to add some additional logic to that ^^^ if-statement to skip observing that part of the expression if key is a number and obj is an array. The reason being, we can only observe keyed array assignment using dirty-checking so it might be better to go back to the old behavior which didn't observe that part of the expression.

Thoughts?

[EisenbergEffect]

That sounds reasonable to me :)

[WisdomCorp]

For the developer whose code was depending on this functionality their code is broke now. How to achieve the same thing -
Below is the explanation by @jdanyow on gitter -

another user reported an issue because they noticed the binding system was using dirty checking to observe an indexed access of an array
for example, in this expression: displayfieldtype[$index], the old version of aurelia was observing three things:
bindingContext.displayfieldtype
bindingContext.$index
displayfieldtype.$index
in the past, when we had Object.observe, this was all fine. But without O.o, #3 requires dirty checking (which is what the user reported as an issue)
so we stopped observing #3
which is probably causing your issue

How we can achieve same behavior as before or what is the alternate way to achieve this. Meaning how to achieve displayfieldtype.$index to be observable again. Thanks