Question

我有一个可以一次编辑一个项目的列表。编辑时，如果用户点击输入EXCEPT外的任何地方取消按钮，则数据应保存。

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

VM代码：

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：

http://jsfiddle.net/RnCUd/21/

Answer 1

您可以通过document.activeElement函数中的save检查新的活动元素以查看它是否为取消按钮，但它似乎无法在JSFiddle的框架中工作（见this StackOverflow post）。

我的建议是切换到文本旁边有一个编辑图标/按钮，并按照此处描述的模式取消和接受编辑：http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html

上述方法涉及显式编辑按钮的优点是最终用户更容易发现您的编辑功能，并且不需要任何指令文本。有关当前模式的问题，请参阅 this UX.StackExchange post 。

更新Observable时的敲除延迟（小提琴）

1 个答案: