如何更新用戶確認的knockoutjs視圖模型？

我有一個編輯的地方部分，我想在knockoutjs模型更新之前添加更改的確認。如何更新用戶確認的knockoutjs視圖模型？

這是我現在擁有的jsFiddle example。這是我想要做的。

用戶點擊編輯部分
文本框顯示帶有保存/取消按鈕旁邊。
如果用戶進行更改並點擊保存，則更新視圖模型
如果用戶進行了更改，但決定保留原始內容，他們單擊取消，視圖模型保持不變，texbox被隱藏，並且可編輯元素保留不變。

取消點擊的行爲是我不知道如何實現。任何人都可以建議如何做到這一點？

2012-03-30 Jerry

我更喜歡爲此使用自定義綁定處理程序。例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()); 

});

來源

2012-03-30 23:54:24 Artem

這正是我所期待的。感謝您創建了一個完整的工作示例，其中包含了knockoutjs和jQuery的完美結合。在那裏有很多新東西，讓我有點研究，找出你在做什麼與knockoutjs的東西。 – Jerry 2012-04-02 15:59:02

我唯一缺少的東西是調用addDisposeCallback（這在某些場景中可能很重要）。編輯示例。 – Artem 2012-04-02 19:33:07

@Artem你可以看看這個問題：[link]（http://stackoverflow.com/questions/35869093/display-data-from-couchdb-with-knockoutjs/35887453#35887453） – FBC 2016-03-09 09:48:27

我在想你可以使用一個可寫的計算屬性來處理這個問題。但是可能更容易分開屬性。一個屬性是不動產，另一個屬於它。當您調出可編輯部分時，它實際上會綁定到影子值。點擊確定按鈕後，將陰影值複製到實際值。如果單擊取消，則執行相反操作（將實際值複製到影子值）。

來源

2012-03-30 20:35:00

這絕對的方式來實現的功能，但我不知道這是去清潔/有效的方法關於它。計劃是在每個領域都有這個保存/取消功能，這意味着如果我採取了你的方法，我必須擁有整個視圖模型的克隆。你可以用計算模型擴展你的第一個想法嗎？我知道有一種方法可以阻止綁定，但有沒有辦法阻止它？ – Jerry 2012-03-30 20:56:57

@Jarek：我只是在那裏吐出一個想法，實際上這只是我另一個想法的榮耀版本，*我認爲*你仍然需要一個支持字段來處理每個值，所以我不確定它會節省你的一切。我不確定它可以工作，因爲你需要一些外部觸發器（點擊保存或取消按鈕）來實際實現寫作（或不）。也許一個真正的KO專家（而不是一個搗鼓它一個月左右的人）有更好的主意？ – 2012-03-30 22:30:51

感謝您的回覆，但Artem提供了使用自定義綁定進行KO的方法。 – Jerry 2012-04-02 16:08:44

如何更新用戶確認的knockoutjs視圖模型？

回答

相關問題