Overview

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);

Parameters

component

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

userOptions

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

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>" + 
          "</span>";
    var markupNode = $(markup);
    targetContainer.append(markupNode);
    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

Model

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 jQuery.data 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

Events

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.

modelFirer.removeListener(listener);

modelFirer.fireEvent();

• The component is responsible for calling fireEvent() when the model changes.

Rendering

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

    that.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();