У меня есть компонент с двумя кнопками, сохранить и отменить. Внутри этого компонента есть слот. И внутри этого слота я помещаю свою форму с некоторыми привязываемыми полями.
мое-app.ts
<section-component>
<form>
<input name = "testA" value.bind = "varA">
<input name = "testB" value.bind = "varB">
</form>
</section-component>
Представьте, что пользователь изменил значения полей, но решил отменить эту редакцию. Когда он нажимает «Отмена», он должен вызывать функцию «удаления» новых данных (не сохраненных), и данные в этих полях возвращаются к исходной форме (старые данные).
Я думал, что лучшим вариантом будет обновить этот конкретный компонент, снова привязав старые данные. Но я не уверен, что это лучший вариант или как это сделать. Кто-нибудь может помочь дать представление или решение, пожалуйста?
🤔 А знаете ли вы, что...
HTML поддерживает атрибуты для определения языка и кодировки веб-страницы.
Может быть несколько стратегий решения этой проблемы. Здесь важнее всего то, что вы хотите сделать после того, как пользователь нажмет «Отмена». Например, если вы хотите сделать редирект, вам не нужно ничего делать для восстановления значений. Это имеет смысл с точки зрения удобства использования.
Однако, если контекст представления требует того же представления со старыми значениями, самый простой способ — восстановить моментальный снимок. Допустим, модель, которую вы связываете с представлением, имеет следующую схему.
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, тогда проверить здесь.
Надеюсь, поможет.