Aurelia

Question

如标题所示，我正在尝试将元素源绑定到计算数组，该数组由 http.fetch 调用的结果填充。这是代码（这个问题的有趣部分）：

观点：

<tr>
    <td repeat.for="boardItemFilter of boardItemFilters">
        <input if.bind="boardItemFilter.isStringFilter()" type="text" value.bind="boardItemFilter.Value & debounce:400" />
        <div if.bind="boardItemFilter.isCheckboxFilter()" repeat.for="sourceValue of boardItemFilter.SourceValues">
            <input type="checkbox" value.bind="sourceValue" checked.bind="boardItemFilter.SelectedValues" />
            <span textcontent.bind="sourceValue"></span>
        </div>
    </td>
</tr>

视图模型：

@computedFrom('selectedUnit')
get boardItemFilters(){
    let unitName = "";
    if(this.selectedUnit != null){
        unitName = this.selectedUnit.Name;
    }
    return this.datacontext.fetchBoardItemFiltersByUnit(unitName)
    .then(result => console.log(result);
}

fetchBoardItemFiltersByUnit() 函数所在位置：

fetchBoardItemFiltersByUnit(unitName){
    let self = this;
    let request = {'unitName': unitName};
    return this.http.fetch('BoardFilters',{
        method: 'post',
        body: json(request),
    }).then(response => response.json())
      .then(response => this.ExtendFilters(response));
}

selectedUnit 上的 boardItemFilters() 计算触发器正确更改。进行了数据上下文调用，该部分工作正常。当 aurelia 尝试在 http.fetch 完成之前绑定属性时，就会出现问题。然后它认为属性不可重复，然后中断。在这些错误之后，console.log(result) 显示服务器 return 编辑的 objects 的预期数组，但结果未分配给计算的属性。我尝试使用信号行为手动重新触发绑定，但没有成功。

问题很自然，我做错了什么？结果是否未存储到计算的属性中，或者是否以非预期的方式绑定它？这个问题的正确解决方案是什么？

我尝试了很多方法，唯一似乎有效的方法是创建一个本地变量来存储 http 结果，并且始终 return 该变量在 promise 函数之外。但自然地，这将始终 return 之前的状态，因为它将运行异步调用，并且 return 在调用完成之前的局部变量。这当然是不能接受的。

或者 Aurelia 是否还不支持异步绑定？

提前致谢！

编辑：我设法破解了一个解决方案，但它非常丑陋（使用 promise 函数中的 bindingSignaler 重新绑定，使用 newValue 和 oldValue 比较来避免无限计算调用等）。我还是很想听听正确的实现方法！

Answer 1

这里有一个解决这种冗长计算操作的方法，它不依赖于异步绑定：

将依赖属性从计算更改为正常属性。
手动观察依赖关系来调用冗长的操作。只有当冗长的操作完成后，才会更新依赖属性.

示例：

export class App {
  @bindable count;

  constructor() {
    this.count = 3;
    this.computeNums(this.count)
      .then(result => this.nums = result);
  }

  countChanged(value) {
    this.computeNums(value)
      .then(result => this.nums = result);
  }

  computeNums(count) {
    let result = [];
    for (let i = 1; i <= count; i++) {
      result.push(i);
    }

    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(result), 1000);
    });
  }
}

这里，nums是从count计算出来的。 computeNums 模拟一个冗长的操作。

观察count是通过@bindable和countChanged的组合实现的。您可能希望使用绑定引擎 API，如中所示。

可以运行的完整示例：https://gist.run/?id=f2e26044796bfe2334d786554039aab0

Aurelia - 将 repeat.for 绑定到从服务器调用填充的计算数组

Aurelia - binding repeat.for to a computed array populated from a server call

binding

asynchronous

httpclient

ecmascript-6