Renderer Templates

Overview

A Renderer Template is an HTML file or snippet that provides guidance to the Renderer regarding how to render the component tree. The template should be thought of as samples of how the creator wants certain types of information to be rendered.

Some general guidelines are helpful when creating Renderer templates:

• A template is contained within a single container that can be identified to the renderer, e.g. through an ID or other form of selector.
• A single template will be processed alongside a single component tree (the 'data').
• It's possible to have more than one template on a page.
• Anything inside the template that does NOT have an rsf:id (or is not mapped to a component through selector-based mapping) will simply be rendered exactly as-is.
• Things with an rsf:id (or which are mapped to a component through selector-based mapping) will be used to render information in the component tree (but not necessarily in the order they're found in the template).
• Any nesting of elements in a template is maintained, and used.

<ul id="myList">
    <li rsf:id="renderedLI">
    </li>
</ul>

<-- Template -->
<ul id="myList">
    <li class="renderedLIclass">
    </li>
</ul>

/* cutpoints array */
var myCutpoints = [{selector: ".renderedLIclass", id:"renderedLI"}];

RSF IDs and Cutpoints

The most direct way to identify the HTML elements that serve as templates for the components in your component tree is to attach the component ID directly to the HTML element using the rsf:id attribute. (The rsf namespace is used to distinguish this attributed from the HTML id attribute - the two are not the same.)

However, in many cases it may be inconvenient or even impossible to add rsf:id attributes to the templates. In these cases, you must define a mapping between the IDs in your component tree and the HTML elements to be used as templates. These mappings are called cutpoints and they use any form of CSS selector to identify the HTMl elements: tag names, class names, etc. Cutpoints are defined in an array of object of the following form:

var myCutpoints = [
    {
       id: <component tree ID>,
       selector: <CSS selector of the HTML template element>
    },
    {
       id: <component tree ID>,
       selector: <CSS selector of the HTML template element>
    },
    ...
];

So, for example, you might have a component tree and cutpoints array that have the following forms:

var myTree = {
  children: [
    { ID: "myID1",
      value: "foo" },
    { ID: "myID2",
      value: "bar" },
    { ID: "myID3",
      target: "http://foo.com",
      linktext: "Foo Company" },
    { ID: "myID4",
      selection: "val2",
      optionlist: ["val1", "val2", "val3"],
      optionnames: ["Value 1", "Value 2", "Value 3"] },
  ]
};

var myCutpoints = [
    {id: "myID1", selector: "p.label"},
    {id: "myID2", selector: "div.label"},
    {id: "myID3", selector: ".linklist a"},
    {id: "myID4", selector: ".dropdown-list"}
];