Aurelia自定义元素实例创建

Aurelia custom element instance creation

本文关键字：创建 实例 元素 自定义 Aurelia      更新时间：2023-09-26

如何在绑定对象更新时创建自定义元素的新实例?假设视图中有一个visitDate，它可以由用户更改。当它改变时，我想更新页面的内容。视图模型:

...
visitDateChanged() {
   this.shifts = [];
   this.newShift = {};
   this.newShift = {pstart: this.visitDate,  pstop: this.visitDate});
   this.service.getData(this.visitDate)
      .then(result => this.shifts = result);
    }
}

视图:

<div repeat.for="shift of shifts | filterDate: visitDate">
    <shift-form shift.bind="shift" shifts.bind="shifts"></shift-form>
</div>
<div>
    <shift-form shift.bind="newShift" shifts.bind="shifts"></shift-form>
</div>

注意:shift-form是自定义元素。现在，如果我在视图中更改visitDate，它将调用visitDateChanged()并更新newShift和shift变量。它分离了所有名为insidediv repeat的移位形式实例。For和根据shift数组中的对象附加新的实例。但它不分离和重新连接shift-form(不创建一个新的实例的shift-form)在第二个div内。我需要一个新的实例的shift-form内div当newShift被重新创建。我设法通过将newShift从对象更改为一个数组来做到这一点。

<div repeat.for="shift of newShift">
    <shift-form shift.bind="shift" shifts.bind="shifts"></shift-form>
</div>

可以，但我不认为这是一个优雅的解决方案

作为Ashley Grant建议我有一个重置功能，但我不听一个变化。我有一个ref的元素，并在需要时在外部调用reset函数。

<some-element controller.ref='someVariableNameHere'></some-element>

和在控制器中使用这个ref:

this.someVariableNameHere.viewModel.reset();
相关文章：