James James - 3 months ago 28
Javascript Question

Aurelia: How to revert back to original model before bind

This is a tricky one. I've got a select element with a list of objects:

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

Then, I have a list of items that come from that select model that's chosen:

<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 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 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>

Now, when the user clicks on an item from the list, it pops up a bootstrap modal and gives the user the ability to edit the item. There are 2 buttons on the modal: cancel & save changes.

The issue I'm having is if I edit the item, then click cancel, the model is still changed so it looks like they've actually edited the item instead of reverting back to the old model. Is there anyway around this?


You have few options there:

  1. Save the content of all model fields to some temp field / fields on modal's view model.
  2. Have separate fields in modal's view model and use that for binding of modal view. Fill in these fields from the model fields when modal is started. When save changes is clicked, copy values to model fields.
  3. A combination of #1 and #2, clone the model and use that for binding. When save changes is clicked, replace the original model with the clone:

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

Btw, consider using aurelia-dialog plugin.