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

【问题标题】：How to update knockoutjs view model on user confirm?如何在用户确认时更新 knockoutjs 视图模型？
【发布时间】：2012-04-03 03:32:16
【问题描述】：

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

这是我现在拥有的 jsFiddle example。这就是我想要它做的事情。

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

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

【问题讨论】：

标签： javascript knockout.js

【解决方案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());

});

【讨论】：

这正是我想要的。感谢您创建了一个完整的工作示例，其中很好地融合了 knockoutjs 和 jQuery。里面有很多新东西，我花了点时间研究一下你用 knockoutjs 的东西做了什么。
我在示例中唯一缺少的是调用 addDisposeCallback（这在某些情况下可能很重要）。编辑示例。
@Artem 你能看看这个问题吗：link

【解决方案2】：

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

【讨论】：

这绝对是实现功能的一种方式，但我不确定这是否是一种干净/有效的方式。计划是在每个字段上都有这个保存/取消功能，这意味着如果我采用你的方法，我必须克隆整个视图模型。你能用计算模型扩展你的第一个想法吗？我知道有一种方法可以限制绑定，但有没有办法阻止它？
@Jarek：我只是在那里吐槽一个想法，实际上它只是我另一个想法的美化版本，我认为你仍然需要一个支持领域每个值，所以我不确定它是否会为您节省任何东西。我不确定它是否可以工作，因为您需要一些外部触发器（单击保存或取消按钮）来实际影响写入（或不影响写入）。也许真正的 KO 专家（而不是摆弄它大约一个月的人）有更好的主意？
感谢您的回复，但 Artem 提供了使用自定义绑定的 KO 方法。