Aurelia: как вернуться к исходной модели перед привязкой

Question

Это хитрый. У меня есть элемент select со списком объектов:

<select class="form-control" value.bind="obj._selectedPlaylistForEdit">
    <option repeat.for="playlist of obj._allPlaylists" value="${playlist.playlistID}" model.bind="playlist">${playlist.PlaylistTitle}</option>
</select>

Затем у меня есть список предметов, которые приходят из выбранной модели, которая выбрана:

<div if.bind="obj._selectedPlaylistForEdit" class="col-md-12 col-lg-12 custom-panel" id="playlist-slides"> 
        <div class="col-md-12 col-lg-12 text-right" style="padding-top:15px;">
            <span class="glyphicon glyphicon-plus-sign" style="color:#bf1e2d;cursor:pointer;font-size:16px;" title="Create new slide" data-toggle="modal" data-target=".bs-new-slide-lg"></span>
        </div>

        <div class="col-md-12 col-lg-12" id="slide-labels">
            <label class="col-md-3 col-lg-3">Slide Title</label>
            <label class="col-md-1 col-lg-1">Frequency</label>
            <label class="col-md-1 col-lg-1">Duration</label>
            <label class="col-md-2 col-lg-2">Start Date</label>
            <label class="col-md-2 col-lg-2">End Date (optional)</label>
            <label class="col-md-2 col-lg-2">Dynamic Data Needed</label>
        </div>
        <div class="col-md-12 col-lg-12" id="slide-element" data-toggle="modal" data-target=".bs-edit-slide-lg" repeat.for="slide of obj._selectedPlaylistForEdit.Slides" click.trigger="populateModalForEditSlide(slide)">
            <h5 class="col-md-3 col-lg-3">${slide.CustomTitle}</h5>
            <h5 class="col-md-1 col-lg-1">${slide.Frequency}</h5>
            <h5 class="col-md-1 col-lg-1">${slide.Duration}</h5>
            <h5 class="col-md-2 col-lg-2" if.bind="slide.StartDate != null">${slide.StartDate | dateFormat}</h5>
            <h5 class="col-md-2 col-lg-2" if.bind="slide.StartDate == null"></h5>
            <h5 class="col-md-2 col-lg-2" if.bind="slide.EndDate != null">${slide.EndDate | dateFormat}</h5>
            <h5 class="col-md-2 col-lg-2" if.bind="slide.EndDate == null"></h5>
            <h5 class="col-md-2 col-lg-2" if.bind="slide.SlideType.CustomDataType !== null">${slide.SlideType.CustomDataType}</h5>
            <h5 class="col-md-2 col-lg-2" if.bind="slide.SlideType.CustomDataType === null">None</h5>
        </div>
</div>

Теперь, когда пользователь нажимает на элемент из списка, он открывает модал начальной загрузки и дает пользователю возможность редактировать элемент. На модале есть 2 кнопки: отменить и сохранить изменения.

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

Answer 1

У вас есть несколько вариантов:

1. Сохраните содержимое всех полей модели в некоторых временных полях / полях модальной модели вида.
2. Имейте отдельные поля в модальной модели представления и используйте это для связывания модального представления. Заполните эти поля из полей модели при запуске модального режима. когда save changes щелкнуть, скопировать значения в поля модели.

3. Комбинация № 1 и № 2 клонирует модель и использует ее для привязки. когда save changes нажмите, замените оригинальную модель на клон:

   let clone = Object.assign({}, model);
   

Кстати, рассмотреть вопрос об использовании aurelia-dialog плагин.