repeat directive may cause binding error on re-rendering view

[p15martin]

🐛 Bug Report

I'm encountering an issue with the repeat directive when a view is reconnected to the DOM. Based on logging and observed behavior, the repeat attempts to reuse previously disconnected views, resulting in binding errors.

Steps to Reproduce

1. Disconnect a parent component containing a repeat directive.
2. Observe that disconnectedCallback() is called for each repeated view, and the view model is nullified (we nullify on disconnectedCallback()) — this is expected.
3. Reconnect the parent component.
4. Observe that:
   • An error occurs for each repeated view that existed before disconnection. It appears it tries to render "old" views with nullified view models, resulting in binding errors.
   • disconnectedCallback() is called again on each repeated view.
   • This all happens before connectedCallback() is called, which initializes the parent view model and triggers the repeat.

💻 Repro or Code Sample

🤔 Expected Behavior

When the parent is reconnected, the repeat directive should not attempt to render previously disconnected views with nullified view models.

😯 Current Behavior

The repeat directive reuses stale views, resulting in binding errors due to nullified view models.

💁 Possible Solution

As a temporary workaround, I subclassed RepeatBehavior and overrode unbind() to explicitly call remove() on each view:

unbind() {
  super.unbind();

  for (const view of this.views) {
    view.remove();
  }

  this.views = [];
}

🔦 Context

🌍 Your Environment