Undo for Component Developers

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

Dependencies

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>