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

我有一个“原地编辑”部分，我想在更新knockoutjs模型之前添加一个更改确认

这是我现在拥有的东西的一半。 这是我想要它做的

用户单击可编辑部分

文本框显示，旁边有保存/取消按钮

若用户进行更改并单击“保存”，则视图模型将更新

如果用户进行了更改，但决定保留原始内容，则单击“取消”，视图模型保持不变，texbox隐藏，可编辑元素保持不变

---

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

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

我更愿意为此使用自定义绑定处理程序。 范例

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());

});​

ko.bindingHandlers.clickEditor={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel）{
var$element=$（element.hide（）；
var$text=$element.prev（）；
变量$buttons=$（“\
拯救\
取消\
“”.hide（）.insertAfter（$element）；
var$editElements=$buttons.add（$element）；
ko.utils.domNodeDisposal.addDisposeCallback（元素，函数（）{
$buttons.remove（）；
});
变量切换=功能（编辑）{
$text[编辑？'hide'：'show']（）；
$editElements[编辑？'show'：'hide']（）；
}
$text.单击（函数（e）{
_切换（真）；
});
$editElements.find（'.saveEdit'）。单击（函数（）{
_切换（假）；
valueAccessor（）（$element.val（））；
});
$editElements.find（'.cancelEdit'）。单击（函数（）{
_切换（假）；
$（element）.val（ko.utils.unwrapObservable（valueAccessor（））；
});
}
，更新：函数（元素，值访问器）{
$（element）.val（ko.utils.unwrapObservable（valueAccessor（））；
}
};
$（文档）.ready（函数（）{
var helpText=“单击此处进行编辑”；
函数appViewModel（）{
this.Address1=ko.observable（帮助文本）；
}
applyBindings（appViewModel（））；
});​

这无疑是实现功能的一种方式，但我不确定这是否是一种干净/高效的方式。计划是在每个字段上都有这个保存/取消功能，这意味着如果我采用您的方法，我必须克隆整个视图模型。你能用计算模型进一步阐述你的第一个想法吗？我知道有一种方法可以阻止绑定，但有没有方法可以阻止它？@Jarek:我只是在那里吐出一个想法，实际上这只是我另一个想法的美化版本，我认为每个值都需要一个支持字段，所以我不确定它是否能为你节省任何东西。我不确定它是否可以工作，因为您需要一些外部触发器（单击保存或取消按钮）来实际执行写入（或不执行）。也许一个真正的KO专家（而不是一个摆弄它大约一个月的人）有一个更好的主意？谢谢你的回复，但是Artem提供了使用定制绑定的KO方法。这正是我想要的。感谢您创建了一个完整的工作示例，它融合了knockoutjs和jQuery。这里有很多新东西，我花了一些研究来弄清楚你在用knockoutjs做什么。我的示例中唯一缺少的是调用addDisposeCallback（在某些情况下这可能很重要）。编辑的示例。@Artem您能看一下这个问题吗：