javascript - 如何在用户确认时更新 knockoutjs View 模型？

Question

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

这是 jsFiddle example我现在所拥有的。 这是我希望它执行的操作。

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

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

Answer 1

我更喜欢为此使用自定义绑定(bind)处理程序。 示例 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());

});​