Aurelia：バインド前に元のモデルに戻す方法

Question

これはトリッキーなものです。ときに、ユーザーがクリックし、今

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

：私が選んだその選択モデルから来る項目のリストを持っている、そして、

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

：私は、オブジェクトのリストで選択要素を持っていますリストから項目を選択すると、ブートストラップ・モーダルがポップアップし、ユーザーは項目を編集することができます。モーダルには2つのボタンがあります：キャンセル&変更を保存します。

アイテムを編集してキャンセルをクリックすると、モデルが変更されて、古いモデルに戻すのではなくアイテムを実際に編集したように見えます。とにかくこれの周りにはありますか？

Answer 1

あなたはそこにいくつかのオプションがあります：

1. モーダルのビューモデルにいくつかの一時フィールド/フィールドにすべてのモデルフィールドの内容を保存します。
2. モーダルのビューモデルで別のフィールドを使用し、モーダルビューのバインディングに使用します。モーダル開始時には、これらのフィールドをモデルフィールドから入力します。 save changesをクリックすると、値がモデルフィールドにコピーされます。

3. ＃1と＃2の組み合わせでモデルをクローン化し、バインディングに使用します。 save changesをクリックすると、クローンと元のモデルを置き換える：

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

はところで、 aurelia-dialogプラグインを使用することを検討してください。