Renderer Component Trees

Each component, or node in the component tree, is identified by an ID (more on these IDs fluid:later):


var myTree = {
  children: [
    {ID: "thing1",
     ...},
    {ID: "thing2",
     ...},
    ...
  ]
};

Component Types

For detailed information about Component types, see Renderer Component Types.

IDs

Each component in the component tree has an ID. These are historically called RSF IDs because the Fluid Renderer is based on Reasonable Server Faces (RSF).

The simplest way to map the component tree onto an HTML template is to add the corresponding IDs to the relevant HTML elements using an rsf:id attribute:

Alternatively, if you prefer not to place rsf:id attributes into the HTML template, you can map selectors to rsf ids.
This will require a selector map, which is an array of objects having selector and id keys. These objects are typically called "cutpoints" and you will see this name in the API documentation. This cutpoints array is passed into the renderer via the cutpoints option of the render function.

The format of an rsf:id gives the renderer guidance as to how to treat the element:

if an rsf:id ends with a colon (e.g. my-table-row:), the element is a repeating element. That is, the renderer will duplicate the HTML element as many times as is necessary to display the data.