Aurelia: Wie man vor dem Binden zum ursprünglichen Modell zurückkehrt

Question

Dies ist ein schwieriger. Ich habe ein select-Element mit einer Liste von Objekten bekommt:

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

Dann habe ich eine Liste von Elementen, die von diesem ausgewählten Modell kommen, die gewählt sind:

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

Nun, wenn der Benutzer klickt Bei einem Element aus der Liste wird ein Bootstrap-Modal angezeigt, und der Benutzer kann das Element bearbeiten. Es gibt 2 Tasten auf dem Modal: Abbrechen & speichern Änderungen.

Das Problem, das ich habe, ist, wenn ich das Element bearbeiten, dann klicken Sie auf Abbrechen, das Modell wird noch geändert, so dass es aussieht, als ob sie das Element tatsächlich bearbeitet haben, anstatt zurück zum alten Modell. Gibt es das überhaupt?

Answer 1

Sie haben nur wenige Möglichkeiten gibt:

1. Speichern der Inhalt aller Modellfelder bis zu einem gewissen Temperatur Feld/Felder auf Sicht Modell modal.
2. Lassen Sie separate Felder im modalen Ansichtsmodell und verwenden Sie diese für die Bindung der modalen Ansicht. Füllen Sie diese Felder aus den Modellfeldern aus, wenn Modal gestartet wird. Wenn Sie auf save changes klicken, kopieren Sie Werte in Modellfelder.

3. Eine Kombination von # 1 und # 2, klonen Sie das Modell und verwenden Sie dieses zum Binden. Wenn save changes geklickt wird, ersetzen Sie das ursprüngliche Modell mit dem Klon:

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

Btw, betrachten aurelia-dialog Plugin.