Как я могу обновить дочерний компонент в Aurelia, чтобы отменить форму? - PullRequest
Новая
       29

Как я могу обновить дочерний компонент в Aurelia, чтобы отменить форму?

3 голосов
/ 24 апреля 2019

У меня есть компонент с двумя кнопками, сохранить и отменить. Внутри этого компонента есть слот. И внутри этого слота я поместил свою форму с некоторыми привязываемыми полями.

мой-app.ts 

<section-component>
 <form>
  <input name="testA" value.bind="varA">
  <input name="testB" value.bind="varB">
 </form>
</section-component>

Представьте, что пользователь изменяет значения полей, но решает отменить эту редакцию. Когда он нажимает кнопку «Отмена», он должен вызвать функцию, чтобы «стереть» новые данные (не сохраненные), и данные в этих полях возвращаются в его исходную форму (старые данные).

Я думал, что лучшим вариантом будет обновить этот конкретный компонент, снова связав старые данные. Но я не уверен, что это лучший вариант или как это сделать. Кто-то может помочь дать понимание или решение, пожалуйста?

1 Ответ

2 голосов
/ 25 апреля 2019

Может быть несколько стратегий для решения этой проблемы.Здесь важнее всего то, что вы хотите сделать после того, как пользователь нажмет «Отмена».Например, если вы хотите сделать перенаправление, вам не нужно ничего делать для восстановления значений.Это имеет смысл с точки зрения удобства использования.

Однако, если контекст представления требует того же представления со старыми значениями, прямой способ - восстановить снимок.Допустим, модель, которую вы связываете с представлением, имеет следующую схему. 

model: { varA: anyType, varB: anyType }

И вы связываете ее следующим образом. 

<input name="testA" value.bind="model.varA">
<input name="testB" value.bind="model.varB">

Тогда вы можете просто сохранить снимок оригиналасмоделируйте и восстановите его позже следующим образом. 

//save the snapshot
this.snapshot = JSON.parse(JSON.stringify(this.model))

//....

// restore the snapshot when user clicks cancel
this.model = this.snapshot

А об остальных должны позаботиться уже существующие привязки.Обратите внимание, что здесь предполагается, что model является просто необработанным контейнером данных и не предлагает никаких функциональных возможностей (не является экземпляром какого-либо определенного пользователем класса, который предлагает дополнительные методы и т. Д .; в этом случае вам необходимо восстановить прототип какхорошо).

Если вы хотите «отменить» действие, а не «отменить», и если вы уже используете aurelia-store, тогда отметьте здесь .

Надеждаэто помогает.

...