Question

如何在更新绑定对象时启动自定义元素的新实例的创建？我们假设我在视图中有一个可由用户更改的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并移动变量。它将所有在div repeat.for内部调用的shift-form实例分离，并根据shift数组中的对象附加新实例。但它并没有在第二个div中分离和重新连接shift-form（不会创建一个新的shift-form实例）。当重新创建newShift时，我需要div内部的shift-form的新实例。我设法通过将newShift从一个对象更改为一个数组来实现。然后

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

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

Answer 1

正如Ashley Grant建议我有一个重置功能，但我不是在听一个改变。我有一个ref元素，我需要在外面调用reset函数。

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

并在使用此ref的控制器中：

this.someVariableNameHere.viewModel.reset();

Aurelia自定义元素实例创建

1 个答案: