Renderer API
This page provides a reference for the functions available for using the Renderer.
Primary Renderer Functions
selfRender
var templates = fluid.selfRender(node, tree, options);
Return: the original parsed template.
A simple driver for single node self-templating. Treats the markup for a node as a template, parses it into a template structure, renders it using the supplied component tree and options, then replaces the markup in the node with the rendered markup, and finally performs any required data binding. The parsed template is returned for use with a further call to fluid.reRender()
.
Parameters
node
Either a raw DOM node in the current document, or else a JQuery object representing one. The markup in this node will be used as the template for rendering, and the node will be replaced with the rendered output.
tree
A Javascript Object representing a component tree. See Renderer Component Trees for more information.
options
A JavaScript object used to configure the details of the rendering process. Unlike options for most Fluid components, this structure sometimes has a bi-directional aspect - it can be used for returning information about the rendering process back to the client, as well as for receiving it. Here is a list of the supported fields and types within the Renderer options:
Join the infusion-users mailing list and ask your questions there.
Field |
Description |
Type |
In/Out |
---|---|---|---|
|
Perhaps the most important parameter, contains the "data model" to which value bindings expressed within the tree will be expressed. |
free |
Mostly In, but the supplied model may be written to later as a result of servicing user actions, especially if the parameter |
|
a ChangeApplier object associated with the |
|
In |
|
If set, any user modification of fields with |
|
In |
|
If set, will cause the rendered ids to be uniquified against the supplied document, rather than the current one |
|
In |
|
If set, mismatches between template and component tree will be highlighted in an unreasonable garish pink colour |
|
In |
|
This map operates in conjunction with the |
free |
In/Out |
|
Configures the lookup from (I18N) messages referenced in the component tree, to some source of a message bundle |
|
In |
|
Will construct a |
|
In |
|
Will XMLEncode the rendered markup before insertion into the document. Can be useful for debugging |
|
In |
|
This is properly a directive to the parser, rather than the renderer, but the options structure is shared. This contains a list of pairs of |
Array of |
In |
reRender
var templates = fluid.reRender(templates, node, tree, options);
Return: the original parsed template.
fluid.reRender()
is identical to fluid.selfRender()
, except that it uses the supplied templates
(the first parameter) as the template instead of the node
parameter. This is useful for re-rendering a template that has been previously rendered.
The options for fluid.reRender()
are identical to those of fluid.selfRender()
.
Sneak Peek: render
New in v1.3: The new fluid.render
function will eventually be the primary means of using the renderer, and will automatically be included in components created using the Sneak Peek fluid.initRendererComponent()
component initialization function. It is available in Infusion version 1.3 as a sneak peek, to allow users to play with it and provide us with feedback.
var something = fluid.render(source, target, tree, options);
Return: the original parsed template.
A simple driver for single node self-templating. Treats the markup for a node as a template, parses it into a template structure, renders it using the supplied component tree and options, then replaces the markup in the node with the rendered markup, and finally performs any required data binding. The parsed template is returned for use with a further call to fluid.reRender()
.
Parameters
source
Either a structure {node: node, armouring: armourstyle
} or a string holding a literal template
target
The node to receive the rendered markup
tree
As for fluid.selfRender
: A Javascript Object representing a component tree. See Renderer Component Trees for more information.
options
As for fluid.selfRender
: A JavaScript object used to configure the details of the rendering process.
Renderer Utility Functions
explode
"Explodes" a section of data model to a flat section of component tree bound against the data. This is suitable only in very straight-forward cases of data binding, where each field in a model can be associated with a piece of markup with a corresponding rsf:id
representing a UIBound
component.
var tree = fluid.explode(hash, basepath)
Parameter |
Type |
Description |
---|---|---|
|
|
A section of data model representing a flat hash of keys to values |
|
|
An optional prefix to be placed on the EL path supplied to the generated |
For example, the following hash:
var hash = {sku: "thing1", description: "explodes"}
could be exploded to
[{ID: "sku", value: "thing1", valuebinding: "1.sku"}, {ID: "description", value: "explodes", valuebinding: "1.description"} ]
if supplied with fluid.explode(hash, "1")
.
explodeSelectionToInputs
A common markup representation is of a UISelect
component as a series of named radio-buttons or checkboxes, in successive rows of a table (in comparison to its natural HTML representation as a <select> tag). This framework function automates the work of generating the additional component tree material to back this representation:
var tree = fluid.explodeSelectionToInputs(optionlist, opts)
Parameter |
Type |
Description |
---|---|---|
|
|
The raw list of options which are available for choice - in general, the value held at |
|