javascript 在 Web 应用程序中实现撤消
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6386743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Implementing undo in a web app
提问by nraynaud
I'm creating a map editing webapp where we can create and edit polylines, polygons etc. I've some trouble finding informations on undo implementation on the web, I find whining about "we need undo" and "here is my Command pattern using closures" but I think between that and a full undo/redo interface there is quite some road.
我正在创建一个地图编辑 web 应用程序，我们可以在其中创建和编辑折线、多边形等。我在网上查找有关撤消实施的信息时遇到了一些麻烦，我发现抱怨“我们需要撤消”和“这是我的命令模式使用关闭”，但我认为在这与完整的撤消/重做界面之间还有很多路要走。
So, here are my questions (good candidate for wiki I think):
所以，这是我的问题（我认为维基的好候选人）：
- Should Imanage the stack, or is there a way to send my commands to the browser's stack ? (and how do I handle native commands, like text edits in textifields in this case)
- how do I handle "command compression" (command grouping) when some commands are browser native
- How do I detect the undo (ctrl+z) keystroke?
- If I register a keyup event, how do I decide if I prevent default or not?
- If not, can I register some undoevent handler somewhere ?
- Users are not used to undo on the web, how can I "train" them to explore/undo on my application ?
- 我应该管理堆栈，还是有办法将我的命令发送到浏览器的堆栈？（以及如何处理本机命令，例如在这种情况下文本字段中的文本编辑）
- 当某些命令是浏览器本机时，我如何处理“命令压缩”（命令分组）
- 如何检测撤消 (ctrl+z) 击键？
- 如果我注册了一个 keyup 事件，我如何决定是否阻止默认？
- 如果没有，我可以在某处注册一些撤消事件处理程序吗？
- 用户不习惯在网络上撤消，我如何“训练”他们在我的应用程序上探索/撤消？
Thanks all.
谢谢大家。
回答by Arthur Clemens
You need to have functions for object creation and deletion. Then pass those functions to the undo manager. See the demo file of my javascript undo manager: https://github.com/ArthurClemens/Javascript-Undo-Manager
您需要具有用于创建和删除对象的函数。然后将这些函数传递给撤消管理器。查看我的 javascript undo manager 的演示文件：https: //github.com/ArthurClemens/Javascript-Undo-Manager
The demo code shows canvas, but the code is agnostic.
演示代码显示了画布，但代码是不可知的。
It doesn't contain key bindings, but may help you with the first steps.
它不包含键绑定，但可以帮助您完成第一步。
Myself I have used this in a web application with buttons for undo and redo, next to save.
我自己在一个 web 应用程序中使用了这个，它带有用于撤消和重做的按钮，旁边是保存。
回答by Paul Tyng
Here is a sample of N-Level undo using Knockout JS:
这是使用 Knockout JS 的 N 级撤消示例：
http://jsfiddle.net/paultyng/TmvCs/22/
http://jsfiddle.net/paultyng/TmvCs/22/
It uses an MVVM model so your page state is represented in a javascript object that it maintains a history for.
它使用 MVVM 模型，因此您的页面状态在它维护历史记录的 javascript 对象中表示。
回答by Francisco Ryan Tolmasky I
The way Cappuccino's automatic undo support works is by telling the undo manager what properties should be undoable. For example, pretend you are managing records of students, you might do something like:
Cappuccino 的自动撤消支持的工作方式是告诉撤消管理器哪些属性应该是可撤消的。例如，假设您正在管理学生的记录，您可能会执行以下操作：
[theUndoManager observeChangesForKeyPath:@"firstName" ofObject:theStudent];
[theUndoManager observeChangesForKeyPath:@"lastName" ofObject:theStudent];
Now regardless of how the students name is changed in the UI, hitting undo will automatically revert it back. Cappuccino also automatically handles coalescing changes in the same run loop, marking the document as "dirty" (needing save) when there are items on the undo stack, etc etc (in other words, the above should be ALL you need to do to support undo).
现在无论学生姓名在 UI 中如何更改，点击撤消都会自动将其还原。Cappuccino 还自动处理同一个运行循环中的合并更改，当撤消堆栈上有项目时将文档标记为“脏”（需要保存）等（换句话说，以上应该是您需要做的全部支持撤消）。
As another example, if you wanted to make additions and deletions of students undoable, you'd do the following:
再举一个例子，如果你想让学生的添加和删除不可撤销，你可以执行以下操作：
[theUndoManager observeChangesForKeyPath:@"students" ofObject:theClass];
Since "students" is an array of students in theClass, then additions and deletions from this array will be tracked.
由于“students”是class中的一个student数组，那么对这个数组的增删改查都会被跟踪。
