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插件。