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 API


The Undo subcomponent provides undo support for any component that bears a model. For more information about subcomponents, see Subcomponents.

Subcomponent Name: fluid.undoDecorator


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. accessible as a member of the component's top-level that.

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

To support Undo, a component's model must:

  • be called model
On This Page
Still need help?

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

Implementing that.updateModel

To support the Undo subcomponent, the component using it must implement a public function on its that object called updateModel:

fluid.myComponent = function(container, options) {
    var that = fluid.initView("fluid.myComponent", container, options);
    that.updateModel = function (newValue, source) {

The updateModel() function must update the locally stored model using the newValue provided. The source parameter is the subcomponent that triggered the model change.


Currently, the Fluid components that support Undo are:


fluid.undoDecorator(component, options);



The component parameter is the parent component object, i.e. the that object returned by the parent component's creator function.


The options parameter is an optional collection of name-value pairs that configure the Pager and its subcomponents, as described below in the #Options section.







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.

In v1.1:

selectors: {
    undoContainer: ".flc-undo-undoContainer",
    undoControl: ".flc-undo-undoControl",
    redoContainer: ".flc-undo-redoContainer",
    redoControl: ".flc-undo-redoControl"

In v1.2:

selectors: {
    undoContainer: ".flc-undo-undoControl",
    undoControl: ".flc-undo-undoControl",
    redoContainer: ".flc-undo-redoControl",
    redoControl: ".flc-undo-redoControl"


A function that renders the markup for the undo controls


In v1.1:
A function that generates the following:

<span class='flc-undo' aria-live='polite' aria-relevant='all'>
    <span class='flc-undo-undoContainer'>[<a href='#' class='flc-undo-undoControl'>undo</a>]</span>
    <span class='flc-undo-redoContainer'>[<a href='#' class='flc-undo-redoControl'>redo</a>]</span>

In v1.2:
A function that generates the following:

<span class='flc-undo' role='region' aria-live='polite' aria-relevant='all'>
    <a href='#' class='flc-undo-undoControl'>...string specified in strings option...</a>
    <a href='#' class='flc-undo-redoControl'>...string specified in strings option...</a>

New in v1.2:

Javascript object containing named strings for use in the interface.

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

strings: {
    undo: "undo edit",
    redo: "redo edit"


The Undo functionality's dependencies can be met by including the minified InfusionAll.js file in the header of the HTML file:

<script type="text/javascript" src="InfusionAll.js"></script>

Alternatively, if you are including individual files, you must include Undo.js:

<... other dependencies ...>
<script type="text/javascript" src="components/undo/js/Undo.js"></script>