Aurelia自定义元素实例创建

Question

How to initiate a creation of new instance of custom element when the bound object is updated? Let's say I have a visitDate in the view that can be changed by a user. When it's changed, I want to update the content of the page. View-model:

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

view:

<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>

Note: shift-form is a custom element. Now if I change visitDate in the view, it calls visitDateChanged() and updates newShift and shifts variables. It detaches all shift-form instances called inside div repeat.for and attaches new instances according to objects inside shifts array. BUT it doesn't detach and reattach shift-form (doesn't create a new instance of shift-form) inside the second div. And I need a new instance of shift-form inside div when newShift is recreated. I managed to do it by changing newShift from an object to an array of one. Then

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

does the trick but I don't think it's an elegant solution

Answer 1

As Ashley Grant suggested I have a reset function, but I am not listening for a change. I have a ref for the element and I call the reset function outside when needed.

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

and in the controller that uses this ref:

this.someVariableNameHere.viewModel.reset();