Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Undo Functionality

This page is deprecated and will be deleted shortly. See either Undo for Component Developers or Undo for Component Users instead.


The "undo" functionality is part of the Fluid framework. It can be used to provide undo support for any component that bears a model.

Currently, the Fluid components that support Undo are:

This page discribes:

  • how to enable undo on components that support it, and
  • how to build undo support into a component that you are creating.

Enabling Undo on Components that Support it

There are two ways to enable Undo on components that support it:

  1. Specify the undo decorator as an option to the component creation
  2. Manually create the undo decorator

Using the componentDecorators option

The simplest way to enable Undo functionality on a component that supports it is to use the componentDecorators option.

This section is currently incorrect.

Option Name




On This Page
Still need help?

Join the infusion-users mailing list and ask your questions there.

Example - Inline Edit

var opts = {
    componentDecorators: "fluid.undoDecorator"
var myEditor = fluid.inlineEdit("#myContainer", opts);

Requesting the "fluid.undoDecorator" will automatically enable the Undo functionality, and the component will be decorated with the necessary controls, etc.

For more control and flexibility, an Undo decorator can be manually created.

Manual Creation

fluid.undoDecorator(component, userOptions);



The component parameter is a standard Fluid component to receive the "undo" functionality.







Javascript object containing selectors for various fragments of the Undo decorator

The object can contain any subset of the following keys:
Any values not provided will revert to the default.

selectors: {
    undoContainer: ".undoContainer",
    undoControl: ".undoControl",
    redoContainer: ".redoContainer",
    redoControl: ".redoControl"


a function that renders the markup for the undo controls


function defaultRenderer(that, targetContainer) {
    var markup = "<span class='fluid-undo'>" + 
          "<span class='undoContainer'>[<a href='#' class='undoControl'>undo</a>]</span>" + 
          "<span class='redoContainer'>[<a href='#' class='redoControl'>redo</a>]</span>" + 
    var markupNode = $(markup);
    return markupNode;

Building Undo Support into a Component

Component developers must ensure that their component has certain features for Undo to work with it. A component must:

  1. Bear a model
  2. Initialize the Undo decorator if requested


To support Undo, a component must bear a 'model,' a collection of Javascript objects which constitute the data which it is operating on. A model:

  • consists of "pure data," i.e. Javascript objects containing only other objects and primitives, without any functions;
  • is 'public,' i.e. as a return available from the component's top-level "that", or else stored within its DOM instance using under a well-known value.

The actual contents of a model is, of course, entirely dependent on the component.

A model must have:

  1. events
  2. a renderer


A component must maintain a list of 'listeners' who may subscribe to model-directed events representing updates to the model. The Fluid Framework provides an Event Firer that can be used for this:

fluid.myComponent = function(container, options) {
    var that = {};
    that.model = {};

    that.modelFirer = fluid.event.getEventFirer();
    return that;

The modelFirer provides three functions:

modelFirer.addListener(listener, namespace, exclusions);

Listeners registered using this function are notified when the model changes.

  • The Undo decorator registers a listener using this function.
  • The component is responsible for calling fireEvent() when the model changes.


The component must implement a no-argument function called render():


This function should "re-render" the component, reflecting any changes in the model.

  • The Undo decorator calls this function when an action is 'un-done' or 're-done.'

Initializing the Undo decorator

A component must respond to a user-supplied option requesting Undo by initializing the Undo decorator. This is accomplished by using the initComponents() framework function:

that.decorators = fluid.initComponents();