Knockout.js 更新观测值时的剔除延迟（w FIDLE）

我有一个项目列表，可以一次编辑一个项目。编辑时，如果用户单击输入之外的任何位置（除“取消”按钮外），则应保存数据

我有这个工作，但有一个轻微的延迟，取消保存，因为“模糊”事件是注册之前，取消按钮点击。我想知道如何消除这种延迟（可能是通过某种方式首先检测到取消），或者是否应该按照当前的脚本编写方式进行修改。我愿意接受任何建议

虚拟机代码：

function PersonViewModel(name) {
    // Data
    var self = this;
    self.name = ko.observable(name);
    self.editing = ko.observable(false);
    self.oldName = ko.observable();      
    // Behaviors
    self.edit = function() { 
        self.oldName(self.name());
        self.editing(true) 
    }
    self.save = function() { 
        self.editing(false) 
    }
    self.cancel = function() { 
        self.name(self.oldName());
        self.editing(false) 
    }
}

ko.bindingHandlers.selected = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var selected = ko.utils.unwrapObservable(valueAccessor());
        if (selected) element.select();
    }
};

ko.applyBindings(new PersonViewModel("Bert Bertington"));

视图：

<button data-bind="click: cancel">CANCEL</button>
<p>
    Name: 
    <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
    <input data-bind="visible: editing, value: name, hasfocus: editing, selected: editing, event: {blur: save}" />
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>

取消

姓名：

单击要编辑的名称；单击其他位置以应用更改

JSFiddle：

---

您可以通过

document.activeElement

功能中的

save

检查新的活动元素，看看它是否是取消按钮，尽管它在JSFIDLE的框架中似乎不起作用（请参阅）

不过，我的建议是切换到文本旁边有一个编辑图标/按钮，并按照此处描述的模式取消和接受编辑：

---

上述涉及显式编辑按钮的方法的优点是，最终用户更容易发现您的编辑功能，并且不需要任何说明文本。有关当前图案的问题，请参见。

我目前有一个编辑按钮-这是在生产中可编辑的唯一方法。我只是重复使用了这个提琴来快速演示取消的问题。我将给document.activeElement一次机会，谢谢：）@RobVious如果这不起作用，并且您已经有了一个编辑按钮，那么我可能建议翻转JSFIDLE中演示的范例，在那里缓存旧值，而不是像这样分离新值：我无法让document.activeElement工作。我更新了你的提琴，再次演示了这个问题：看到“取消”在那里不起作用了吗？如果单击了“取消”按钮之外的任何内容，我都想保存。顺便说一句，谢谢您的帮助，我很确定您整个星期都在回答我的问题：P@RobVious没问题，哈哈。我认为这可能与JSFiddle的框架有关，但在本地它似乎也不适用于我。在这种情况下，模糊可能不是一个可用的触发器。