Undo API

This page has not yet been updated to reflect the latest API changes.

Overview

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.

Support

Currently, the Fluid components that support Undo are:

Inline Edit

Construction


fluid.undoDecorator(component, options);

Parameters

component

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

options

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.

Options

Name	Description	Values	Default

Name

Description

Values

Default

selectors

Javascript object containing selectors for various fragments of the Undo decorator

The object can contain any subset of the following keys:
   undoContainer
   undoControl
   redoContainer
   redoControl
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"
}

renderer

A function that renders the markup for the undo controls

function

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>
</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>
</span>

New in v1.2:
strings

Javascript object containing named strings for use in the interface.

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

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

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>

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.