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 for Component Developers


The Undo functionality is implemented as one of the framework's Subcomponents. It can be used to provide undo support for any component that bears a model.

Currently, the Fluid components that support Undo are:

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

  1. Bear a model,
  2. Implement that.updateModel(),
  3. Initialize the Undo decorator if requested.
On This Page
Still need help?

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


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

Implementing that.updateModel

The component 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.

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 initSubcomponents() framework function:

that.decorators = fluid.initSubcomponents(that, className, args);

For more information on subcomponents, see Subcomponents.


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>