奥雷利亚:如何在绑定前恢复到原来的模型

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>

现在，当用户单击列表中的项时，它会弹出一个引导模式，并使用户能够编辑该项。模式上有两个按钮：“取消和保存更改”。

我遇到的问题是，如果我编辑项目，然后单击cancel，模型仍然会被更改，所以看起来他们实际上已经编辑了项目，而不是返回到旧的模型。不管怎么说，这附近有吗？

Answer 1

你在那里没有什么选择：

1. 将所有模型字段的内容保存到模型视图模型上的某个临时字段/字段中。
2. 在模态视图模型中有单独的字段，并将其用于模态视图的绑定。在模态启动时，从模型字段中填写这些字段。单击save changes时，将值复制到模型字段。
3. 将#1和#2组合起来，克隆模型并将其用于绑定。单击save changes时，用克隆替换原始模型： 设克隆= Object.assign({}，模型)；

顺便说一句，考虑使用aurelia-dialog插件。