如何在用户确认时更新knockoutjs视图模型

How to update knockoutjs view model on user confirm?

本文关键字：更新 knockoutjs 视图 模型 确认 用户      更新时间：2023-09-26

我有一个就地编辑部分，我想在更新knockoutjs模型之前向其中添加更改确认。

下面是我现在拥有的jsFiddle示例。这是我想要它做的。

  1. 用户点击可编辑部分
  2. 文本框出现，旁边有保存/取消按钮
  3. 如果用户进行了更改并单击"保存"，则视图模型将更新
  4. 如果用户进行了更改，但决定保留原始内容，则单击"取消"，视图模型保持不变，texbox被隐藏，可编辑元素保持不变

取消点击的行为是我不确定如何实现的。有人能建议如何做到这一点吗？

我更喜欢使用自定义绑定处理程序。实例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());
});​

我想您可能可以使用可写的计算属性来处理此问题。但是，只需要分离属性可能会更容易。一个属性是真实属性，另一个属性对其进行阴影处理。当您打开可编辑部分时，它实际上绑定到阴影值。单击"确定"按钮时，将阴影值复制到实际值。如果单击"取消"，则执行相反的操作（将实际值复制到阴影值）。

相关文章：