2 properties that are bound are out of sync

[justinbmeyer]

@PieterSwitten commented on Thu Mar 01 2018

How often can you reproduce it?

• Always
• Sometimes
• Rarely
• Unable
• I didn’t try

Description:
See the jsbin and the gif to see the problem.
2 properties are bound to each other, when I change the property in my parent it changes also in my child component.
But when I change the property back to the original value inside the setter of my child property it is not changed back in the parent component.

At this point the 2 properties are out of sync.

Steps to reproduce:

https://jsbin.com/zacadiciru/63/edit?html,js,console

Expected results:

console.log(parent.childVisibility) // --> false
console.log(child.visible) // --> false

Actual results:

console.log(parent.childVisibility) // --> true
console.log(child.visible) // --> false

Environment:

Software	Version
can-define version	2.0.3
Browser	Chrome
Operating system	macOS High Siera

---

@justinbmeyer commented on Thu Mar 01 2018

I’m not sure this is why (away from computer) but bindings only allow one parent<->child change per batch. So if you change a parent value, and that changes a child, the child will not update the parent. This is to avoid cycles. Kevin has talked about removing this protection.

Sent from my iPhone

On Mar 1, 2018, at 7:08 AM, Pieter Switten notifications@github.com wrote:

How often can you reproduce it?

Always
Sometimes
Rarely
Unable
I didn’t try
Description:
See the jsbin and the gif to see the problem.
2 properties are bound to each other, when I change the property in my parent it changes also in my child component.
But when I change the property back to the original value inside the setter of my child property it is not changed back in the parent component.

At this point the 2 properties are out of sync.

Steps to reproduce:

https://jsbin.com/zacadiciru/63/edit?html,js,console

Expected results:

console.log(parent.childVisibility) // --> false
console.log(child.visible) // --> false
Actual results:

console.log(parent.childVisibility) // --> true
console.log(child.visible) // --> false
Environment:

Software Version
can-define version 2.0.3
Browser Chrome
Operating system macOS High Siera
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

---

@justinbmeyer commented on Fri Mar 23 2018

Btw, thanks for creating such a nice issue.

We could create a special syntax for now to allow essentially infinite cycles. Would you be interested in trying this out?

I would like to come up with a better name, but something like

<child-tag visible:bind:cycle="childVisibility" />

Where cycle would allow looping. Maybe sticky would work too. cc @phillipskevin

Just to make sure this fixes your problem, could you try commenting out the following 4 lines:

can-stache-bindings/can-stache-bindings.js

Line 663 in 908c2ae

bindingsSemaphore[attrName] = (bindingsSemaphore[attrName] || 0) + 1;

 bindingsSemaphore[attrName] = (bindingsSemaphore[attrName] || 0) + 1;

And

can-stache-bindings/can-stache-bindings.js

Line 668 in 908c2ae

--bindingsSemaphore[attrName];

--bindingsSemaphore[attrName];

And

can-stache-bindings/can-stache-bindings.js

Line 720 in 908c2ae

bindingsSemaphore[attrName] = (bindingsSemaphore[attrName] || 0) + 1;

:

bindingsSemaphore[attrName] = (bindingsSemaphore[attrName] || 0) + 1;

And

can-stache-bindings/can-stache-bindings.js

Line 726 in 908c2ae

--bindingsSemaphore[attrName];

--bindingsSemaphore[attrName];

These lines are used to prevent binding cycles from continuing forever. For example a parent could always convert "1" to 1 and a child could do the opposite. In this situation, they would change each other non-stop.

---

@justinbmeyer commented on Fri Mar 23 2018

moving to can-stache-bindings as this is an issue there.