ユーザー確認時にknockoutjsビューモデルを更新するにはどうすればよいですか？

Question

私はknockoutjsモデルが更新される前に、変更の確認を追加したい場所の編集セクションを持っています。

ここに私が今持っているもののjsFiddle exampleがあります。 ここに私がしたいことがあります。

1. ユーザーは
2. テキストボックスの横にボタンをキャンセル/保存が表示され、編集可能なセクションをクリックします。
3. ユーザーが変更してクリック保存を行う場合、ビューモデルが
4. に更新され、ユーザーが変更になりますが、元のコンテンツを維持することを決定した場合、彼らは、キャンセルをクリックし、ビューモデルはtexboxが隠されている、変更されないまま、および編集可能な要素が残ります変わらない。

キャンセルクリックの動作は実装方法がわかりません。どのようにこれを行うことができます誰も提案できますか？

Answer 1

私はこのためにカスタムバインディングハンドラを使用することをお勧めします。 間違いなく機能性を達成するための方法ですが、私はそれがどこへ行くか、クリーン/効率的な方法だかはわからない例http://jsfiddle.net/7v6Dx/10/

Htmlの

<div> 
    <span class="editField"> 
     <span data-bind="text: Address1">Click here to edit</span> 
     <input type="text" data-bind="clickEditor: Address1"> 
    </span> 
</div>​ 

はJavaScript

ko.bindingHandlers.clickEditor = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {   
     var $element = $(element).hide(); 
     var $text = $element.prev(); 
     var $buttons = $("<span class='editConfirm'> \ 
        <button class='saveEdit' type='button'>Save</button> \ 
        <button class='cancelEdit' type='button'>Cancel</button> \ 
       </span>").hide().insertAfter($element); 
     var $editElements = $buttons.add($element); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $buttons.remove(); 
     }); 

     var _toggle = function(edit) { 
      $text[edit? 'hide' : 'show'](); 
      $editElements[edit? 'show' : 'hide'](); 
     } 

     $text.click(function(e) { 
      _toggle(true); 
     }); 

     $editElements.find('.saveEdit').click(function() { 
      _toggle(false); 
      valueAccessor()($element.val()); 
     }); 

     $editElements.find('.cancelEdit').click(function() { 
      _toggle(false); 
      $(element).val(ko.utils.unwrapObservable(valueAccessor())); 
     }); 
    } 
    , update: function (element, valueAccessor) { 
     $(element).val(ko.utils.unwrapObservable(valueAccessor())); 
    } 
}; 

$(document).ready(function() { 
    var helpText = "Click here to edit"; 

    function appViewModel() { 
     this.Address1 = ko.observable(helpText); 
    } 
    ko.applyBindings(appViewModel()); 

});​ 

Answer 2

おそらく、これを処理するための書き込み可能な計算されたプロパティを使用できると思っていました。しかし、プロパティを分離するだけで簡単になるかもしれません。 1つは不動産、もう1つは不動産です。編集可能なセクションを表示すると、実際にはシャドウ値にバインドされます。 OKボタンをクリックすると、シャドウ値が実際の値にコピーされます。キャンセルをクリックすると、反対のことが行われます（実際の値をシャドウ値にコピーします）。