Elements inside of an if binding have the values of their bindings destroyed after being recreated in the DOM

[niieani]

Inside of a custom element I have a @bindable property that is an instance of a specific object. Initially, it works correctly, but if I wrap an instance of that element in an if.bind and toggle the return value of the if.bind off and on, the object reappears, but its binding is now "handicapped", i.e. it no longer holds the object's instance, but a generic Object (without any arrays or methods).

Demo plunker: http://embed.plnkr.co/LPyYr0/preview

Steps to reproduce:

1. click the green "+" to add a component
2. click the green "+" on the newly created component to create a nested one
3. fold the main "design" component
4. the underlying property data is no longer an object instanceof ComponentData but a common Object. i.e. it is no longer possible to invoke the method on it to create more nested objects.

The workaround is to use the lighter show binding instead of the if.

@jdanyow initially suggested it might be related to #205.
See also the Gitter discussion

[danfma]

Give a look at this example too... http://plnkr.co/edit/OpNfWu?p=preview

1. With the console open
2. Click on the create button
3. Click on the check button
4. Click on the destroy button
5. Click on the check button

[niieani]

@danfma I believe your example is unrelated to this specific bug (which is related to if binding specifically), see #205.

[jdanyow]

closing this- @niieani's originally reported issue is not a supported binding/custom-element scenario. The custom element attempts to access a property that doesn't exist on the bindingContext: $parent.

@danfma here's a current aurelia plunker if you want to re-test your issue against the latest version: http://plnkr.co/edit/i52DPO?p=preview

@niieani let me know if you have any questions on this- or head over to the main gitter.

[niieani]

@jdanyow Thanks for digging into this.
I've added console.log('binding context', bindingContext.$parent); into the bind method, trying to retrace what you're saying, i.e. that the property doesn't exist at some point, but whatever my actions, the console shows that the property does exist at all times (it's never undefined, since it's being set for every object except as they're being bound).
Anyhow, it boggles my mind why a show bind would work while an if not, if the case was an inexistent property?

[jdanyow]

@niieani I think when you update to the latest version of Aurelia (released this week) you'll find that the $parent property no longer exists on the bindingContext. You can still use $parent in binding expressions, but internally Aurelia no longer adds a property to your view-model to track the $parent.

[niieani]

@jdanyow I see, the bind method doesn't seem to give the bindingContext for custom-elements anymore. In that case, how can we now access the parent of a custom-element at the time of it's creation? I've tried @inject(Optional.of(Component)), but since I'm nesting the same object within itself, it gives me a Maximum call stack size exceeded. I presume it's trying to inject itself, instead of injecting the parent. Perhaps that could be fixed?

Plunker: http://plnkr.co/edit/69hgop

[jdanyow]

you're close- check out this http://stackoverflow.com/a/32781324/725866