ref is not updated when an if.bind changes state.

[RichTeaTime]

I'm submitting a bug report

• Library Version:
  1.0.5

• Language:
  TypeScript 2.0.3

Current behavior:

On an element which uses if.bind and ref:

<div if.bind="showApp" ref="theelement">
    This is the element.
</div>

As expected, when the if.bind evaluates to 'false', the 'ref' attribute on it (or below it), evaluates to undefined.

Changing the property so that the if.bind now evaluates to 'true' causes the element to be shown.
However, the 'theelement' property remains undefined for a significant period of time after the assignment is changed.

Expected/desired behavior:

When the if.bind becomes true, the ref should be set. Or there should be a simple way to trigger code when the ref has been assigned (bindings? taskqueue?)

https://gist.run/?id=29c33d2954d53945a0361eca79666e39

What is the motivation / use case for changing the behavior?

Using show.bind (which does leave the ref set, because the Element already exists) causes code to be executed when it isn't required. Being able to if.bind an element, have it come into existence based on binding changes, and then be able to refer to that element from the view-model is vital for simple, easy to read code.

[jdanyow]

This is working as designed. Recommend refactoring your code such that the logic that depends on the DOM element is in a custom element or custom attribute instead of trying to synchronize multiple bindings (if and ref).

Another option would be to use a property setter for theelement. Then you'll know exactly when it's assigned.

_theelement = null;
get theelement() {
  return this._theelement;
}
set theelement(value) {
  this._theelement = value;
  // do the stuff you needed to do
}