Backbone.undo.js对象/模型/集合定义及注册与页面撤销功能问询

核心概念：要注册的对象是什么？ #

Backbone.undo.js 只针对 Backbone.Model 或 Backbone.Collection 实例 做变更追踪，它通过监听这些数据模型的内置事件（如Model的change、Collection的add/remove）来记录操作历史。DOM元素（比如body）不能直接作为注册对象，因为它不是Backbone的数据模型，无法触发库需要追踪的变更事件。

完整实现步骤 #

1. 定义业务数据模型 #

先创建你实际业务需要的Model或Collection，所有需要撤销/重做的操作都要通过修改这些模型的数据来完成：

// 示例：用户信息Model
const User = Backbone.Model.extend({
  defaults: {
    username: '',
    email: ''
  }
});

// 示例：任务列表Collection
const TaskList = Backbone.Collection.extend({
  model: Backbone.Model.extend({
    defaults: { content: '', completed: false }
  })
});

2. 实例化UndoManager并注册模型 #

register 参数接收单个或多个Model/Collection实例，track 参数指定要追踪的事件类型：

// 实例化业务模型
const currentUser = new User({ username: 'josh', email: 'josh@example.com' });
const tasks = new TaskList();

// 初始化UndoManager
const undoManager = new Backbone.UndoManager({
  // 注册需要追踪的模型/集合，支持数组
  register: [currentUser, tasks],
  // 针对不同类型模型指定追踪事件
  track: {
    'User': ['change'], // 追踪User模型的change事件
    'TaskList': ['add', 'remove'] // 追踪任务集合的增删事件
  }
});

提示：如果所有模型用统一的追踪事件，也可以直接传数组，比如track: ['change', 'add', 'remove']

3. 绑定撤销/重做按钮事件 #

直接调用UndoManager的undo()和redo()方法，建议先通过canUndo()/canRedo()判断状态，避免无效调用：

// 撤销按钮
document.querySelector('#undo-btn').addEventListener('click', () => {
  if (undoManager.canUndo()) {
    undoManager.undo();
  }
});

// 重做按钮
document.querySelector('#redo-btn').addEventListener('click', () => {
  if (undoManager.canRedo()) {
    undoManager.redo();
  }
});

4. 让操作触发模型变更 #

确保页面上的交互操作都映射到模型的数据修改，比如输入框修改同步到Model：

// 示例：输入框修改用户名
document.querySelector('#username-input').addEventListener('input', (e) => {
  currentUser.set('username', e.target.value);
});

// 示例：添加任务
document.querySelector('#add-task-btn').addEventListener('click', () => {
  const content = document.querySelector('#task-input').value;
  tasks.add({ content });
});

你之前的问题出在哪？ #

把body封装成Backbone.Model没有意义：这个模型没有绑定任何业务数据变更，Backbone.undo无法捕捉到有效的操作历史。你需要将页面上需要撤销的交互（比如表单修改、列表增删）与对应的Backbone Model/Collection数据操作绑定，让库能追踪到这些数据变更。

额外注意事项 #

• 加载顺序：必须先加载Backbone.js，再加载Backbone.undo.js
• 自定义操作：如果有批量修改等复杂操作，可以手动添加撤销动作：

  undoManager.add({
    undo: () => { /* 撤销逻辑 */ },
    redo: () => { /* 重做逻辑 */ }
  });
  

• 栈大小限制：可以通过limit参数设置撤销栈的最大长度，避免内存占用过高：new Backbone.UndoManager({ limit: 50 })

内容的提问来源于stack exchange，提问作者Joshua Robison