what is a backbone.undo.js object/model/collection and how do I register it?

Question

I'm trying to use backbone.undo.js to implement undo and redo function into my html/javascript web app.

I understand that I need to do this

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

But I do not know what the object is.

I have already created the undo buttons as follows

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

I believe that this does not work because I have not configured "object" correctly. But the tutorial video did not go into that.

What step am I missing?

update 05/02

I think the step I am missing looks something like this

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

I just want to get undo working on my entire page so it seems logical that I would register the body. What am I missing? This code does not work.

Answer 1

Pro tip: video tutorials are nice, but make sure to always read the written documentation as well. It tends to include details that videos will omit for brevity.

In this case, the writing under the video explains that register should be a model, a collection or an array of models and collections.

Answer 2

I ended up writing my own undo redo script. It was a lot easier than I thought it would be.

// 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();
});