Question

我有一个编辑到位部分，我想在更新knockoutjs模型之前添加更改确认。

这是我现在拥有的jsFiddle example。这就是我希望它做的事。

用户点击可编辑部分
文本框旁边显示保存/取消按钮。
如果用户进行更改并单击“保存”，则会更新视图模型
如果用户进行了更改，但决定保留原始内容，则单击取消，视图模型保持不变，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

我原以为你可能会使用可写的计算属性来处理这个问题。但是，分离属性可能更容易。一个属性是不动产，另一个属性是阴影。当您调出可编辑部分时，它实际上绑定到阴影值。单击确定按钮时，将阴影值复制到实际值。如果单击取消，则执行相反的操作（将实际值复制到阴影值）。

如何更新用户确认的knockoutjs视图模型？

2 个答案: