2

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

我有这个工作，但取消保存有一点延迟，因为在单击取消按钮之前注册了“模糊”事件。我想知道如何消除这种延迟（也许通过某种方式首先检测到取消），或者我是否应该按照当前脚本的方式重新设计。我愿意接受任何建议。

虚拟机代码：

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>

JSF中：

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

4

1 回答 1

1

您可以通过检查新的活动元素来查看它是否是document.activeElement您的save函数中的取消按钮，尽管它似乎在 JSFiddle 的框架中不起作用（请参阅此 StackOverflow 帖子）。

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

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

于 2013-05-29T19:48:40.857 回答