title: Aurelia - binding repeat.for to a computed array populated from a server call
body: <p>As the title suggests, I am trying to bind an elements source to a computed array which is populated by results from a http.fetch call. Here is the code (the interesting parts for this question):</p>
  
  <p>The view:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td repeat.for="boardItemFilter of boardItemFilters"&gt;
          &lt;input if.bind="boardItemFilter.isStringFilter()" type="text" value.bind="boardItemFilter.Value &amp; debounce:400" /&gt;
          &lt;div if.bind="boardItemFilter.isCheckboxFilter()" repeat.for="sourceValue of boardItemFilter.SourceValues"&gt;
              &lt;input type="checkbox" value.bind="sourceValue" checked.bind="boardItemFilter.SelectedValues" /&gt;
              &lt;span textcontent.bind="sourceValue"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The viewmodel:</p>
  
  <pre><code>@computedFrom('selectedUnit')
  get boardItemFilters(){
      let unitName = "";
      if(this.selectedUnit != null){
          unitName = this.selectedUnit.Name;
      }
      return this.datacontext.fetchBoardItemFiltersByUnit(unitName)
      .then(result =&gt; console.log(result);
  }
  </code></pre>
  
  <p>Where the fetchBoardItemFiltersByUnit() function is:</p>
  
  <pre><code>fetchBoardItemFiltersByUnit(unitName){
      let self = this;
      let request = {'unitName': unitName};
      return this.http.fetch('BoardFilters',{
          method: 'post',
          body: json(request),
      }).then(response =&gt; response.json())
        .then(response =&gt; this.ExtendFilters(response));
  }
  </code></pre>
  
  <p>The <code>boardItemFilters()</code> computed triggers on selectedUnit change properly. The datacontext call is made, that part works just fine. The problem happens when aurelia tries to bind the property before the http.fetch is done. It then thinks that the property is not repeatable, and breaks. After those errors, the <code>console.log(result)</code> displays the expected array of objects that the server returned, but the result is not assigned to the computed property. I have tried to manually re trigger the binding using the signal behavior, with no luck.</p>
  
  <p>The question is naturally, what am i doing wrong? Are the results not being stored into the computed property, or am binding it in a way that is not expected? What would be the proper solution to this problem?</p>
  
  <p>I have tried a lot of things, and the only thing that seemed to work is to create a local variable which stores the http results, and always return that variable OUTSIDE the promise functions. But naturally, that will always return the previous state since it will run the asynch call, and return the local variable before the call finishes. This is of course unacceptable.</p>
  
  <p>Or does Aurelia simply not yet support async binding?</p>
  
  <p>Thank you in advance!</p>
  
  <p>EDIT:
  I have managed to hack into a solution, but it's pretty ugly (using the bindingSignaler in the promise function to rebind, using the newValue and oldValue comparison to avoid infinite computed calls etc). I would still much like to hear the proper way to achieve this!</p>