什么是 backbone.undo.js 对象/模型/集合，我该如何注册它？

Question

我正在尝试使用 backbone.undo.js 在我的 html/javascript 网络应用程序中实现撤消和重做功能。

我知道我需要这样做

//Instantiate your UndoManager
var undoManager = new Backbone.UndoManager({
    register: object,
    track: true
})

但我不知道对象是什么

我已经创建了撤销按钮如下

$(document).on("click", ".UNDO", function() { 
    //UNDO ONE STEP
    undoManager.undo();
});
$(document).on("click", ".REDO", function() { 
    //REDO LAST ACTION
    undoManager.redo();
});

我认为这不起作用，因为我没有正确配置“对象”。但是教程视频没有涉及到那个。

我错过了什么步骤？

更新 05/02

我认为我缺少的步骤看起来像这样

var sitebody = $('body');
var bodyModel = new Backbone.Model();
bodyModel.setElement(sitebody);

我只想在我的整个页面上进行撤消操作，所以我注册正文似乎是合乎逻辑的。我错过了什么？ 此代码不起作用。

Answer 1

专业提示：视频教程很好，但请务必阅读书面文档。它往往包含视频为了简洁而省略的细节。

在这种情况下，视频下方的文字说明

register

应该是模型，集合或模型和集合的数组。

Answer 2

我最终写了自己的撤消重做脚本。 这比我想象的要容易得多。

// Array to store the page states
var pageStates = [];

// Arrays to store undo and redo states
var undoStates = [];
var redoStates = [];

// Function to track changes and store page state
function trackChanges() {
  // Get the current state of the page
  var currentState = $("#PAGE").html();

  // Add the current state to the array
  pageStates.push(currentState);

  // Keep only the last 10 states
  if (pageStates.length > 20) {
    pageStates.shift();
  }

  // Clear the redo stack whenever a new change is made
  redoStates = [];
}

// Function to undo the last page state
function undo() {
  // Check if there are any previous states to undo to
  if (pageStates.length > 1) {
    // Get the previous state from the array
    var previousState = pageStates.pop();

    // Add the current state to the redo array
    redoStates.push($("#PAGE").html());

    // Update the page with the previous state
    $("#PAGE").html(pageStates[pageStates.length - 1]);

    // Add the previous state to the undo array
    undoStates.push(previousState);
  }
}

// Function to redo the last undone state
function redo() {
  // Check if there are any newer states to redo to
  if (redoStates.length > 0) {
    // Get the next state from the redo array
    var nextState = redoStates.pop();

    // Add the current state to the undo array
    undoStates.push($("#PAGE").html());

    // Update the page with the next state
    $("#PAGE").html(nextState);

    // Add the next state to the pageStates array
    pageStates.push(nextState);
  }
}


// Call trackChanges whenever text input changes happen
$(document).on('input', function() {
  trackChanges();
});