Aurelia, check when DOM is compiled?
<p>How to check when DOM is compiled and inserted from Aurelia repeat cycle when the model is updated?</p>

<p>I have the following html:</p>

<pre><code>&lt;div clas="parent"&gt;
   &lt;div class="list-group"&gt; 
      &lt;a repeat.for="$item of treeData"&gt;${$item.label}&lt;/a&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here I need to know when all <code>&lt;a&gt;</code> tags are listed in the DOM, in order to run jquery scroll plugin on the parent <code>&lt;div&gt;</code> container. </p>

<p>At first load, I do that from the attached() method and all is fine.</p>

<p>When I update the <strong>treeData</strong> model from a listener, and try to update the jquery scroll plugin, it looks that the DOM is not compiled, so my scroll plugin can not update properly. </p>

<p>If I put timeout with some minimum value like 200ms it works, but I don't think it is a reliable workaround.</p>

<p>So is there a way to solve that? </p>

<p>Thanks!</p>

<p>My View Model:</p>

<pre><code>@customElement('tree-view')
@inject(Element, ViewResources, BindingEngine)
export class TreeView {
  @bindable data = [];
  @bindable filterFunc = null;
  @bindable filter = false;
  @bindable selectedItem;

  constructor(element, viewResources, bindingEngine) {
    this.element = element;
    this.viewResources = viewResources;
    this.bindingEngine = bindingEngine;
  }

  bind(bindingContext, overrideContext) {
    this.dataPropertySubscription = this.bindingEngine
      .propertyObserver(this, 'data')
      .subscribe((newItems, oldItems) =&gt; {
        this.dataCollectionSubscription.dispose();
        this._subscribeToDataCollectionChanges();
        this.refresh();
      });

    this.refresh();

    if (this.filter === true) {
      this.filterChanged(this.filter);
    }

    if (this.selectedItem) {
      this.selectedItemChanged(this.selectedItem);
    }
  }

  attached() {
     $(this.element).perfectScrollbar();
  }


  refresh() {
    this.treeData = processData(this.data, this.filterFunc);
    this.listItemMap = new WeakMap();
    this.treeData.forEach(li =&gt; this.listItemMap.set(li.item, li));
    this.filterChanged(this.filter);

    $(this.element).perfectScrollbar('update');
  }
</code></pre>

<p>This is only part of the code, but most valuable I think. 
I attach the jq plugin in attached function and try to update it in refresh function. In general I have listener that track model in other view, which then update that one without triggering bind method.</p>