UIZE JavaScript Framework

MODULES Uize.Templates.List

1. Introduction

The Uize.Templates.List module is a JavaScript Template module, used for generating HTML markup for an unordered list from a JSON data tree.

DEVELOPERS: Chris van Rensburg

1.1. Examples

The following example pages are good showcases for the Uize.Templates.List module...

List Template - See a demo of a template JavaScript module - hand-written, rather than compiled from a JST file - used to generate a hierarchical list from JSON data.


Use the link below to search for example pages on the UIZE Web site that reference the Uize.Templates.List module...


1.2. Implementation Info

The Uize.Templates.List module defines the Uize.Templates.List package under the Uize.Templates namespace.

1.2.1. Features Introduced in This Module

The features listed in this section have been introduced in this module.




Uize.Templates.List.input | Uize.Templates.List.moduleName | Uize.Templates.List.pathToResources

1.2.2. Features Overridden in This Module

No features have been overridden in this module.

1.2.3. Features Inherited From Other Modules

This module has no inherited features.

1.2.4. Modules Directly Under This Namespace

There are no modules directly under this namespace.

1.2.5. Unit Tests

The Uize.Templates.List module is unit tested by the Uize.Test.Uize.Templates.List test module.

2. Static Methods

2.1. Uize.Templates.List.process

Returns a string, being the generated HTML for the unordered list.


listHtmlSTR = Uize.Templates.List.process (inputOBJ);

The value of the inputOBJ parameter should be an object of the form...

  indentChars : indentCharsSTR,  // optional, the character(s) used for indenting list items
  items       : itemsARRAY       // required, the items in the root level list

2.1.1. indentChars

An optional string, specifying the characters(s) that should be used for indenting list items in the generated HTML output.

When this property is not specified, its value is defaulted to the "\t" (single tab) character.

2.1.2. items

An array, specifying the items in the list.

Each element of the items array should be an object of the form...


  title       : titleSTR,        // required, the displayed title for the item
  link        : linkHrefSTR,     // optional, the URL for a linked item
  description : descriptionSTR,  // optional, the text to be used for a tooltip
  items       : itemsARRAY,      // optional, an array of items for a nested list
  expanded    : expandedBOOL     // optional, a boolean to specify list collapsing
} title

A string, specifying text that should be displayed for the item, and that will be linked if a URL is specified in the item's link property. link

An optional string, specifying a URL that the item's title should be linked to.

When this property is present, the value of an item's title property will be enclosed in a link tag, otherwise the item's title will be rendered simply as unlinked text. description

An optional string, specifying text that should be used for the "title" attribute of a link tag that encloses the value of the item's title property.

If no link URL is specified for the item's link property, then the description property is not applicable. By using the value of the description property for the "title" attribute of the link, the specified description will be displayed in a tooltip when the user mouses over a linked item. items

An optional array, specifying the items in a nested list (yes, it's items all the way down). expanded

An optional boolean, specifying whether or not the nested list specified by an item's items property should be expanded.

When this property is not present, it's value will be defaulted to true. By default, all lists at all levels in the tree are expanded. If the value false is specified for the expanded property, then the CSS style setting display:none will be added to the HTML generated for an item's nested list. If no array is specified for an item's items property, then the item's expanded property is not applicable.


this feature was introduced in this module

3. Static Properties

3.1. Uize.Templates.List.input

An object, describing the allowed properties of the inputOBJ parameter of the Uize.Templates.List.process static method.


this feature was introduced in this module

3.2. Uize.Templates.List.moduleName


this feature was introduced in this module

3.3. Uize.Templates.List.pathToResources


this feature was introduced in this module