Advanced Lists

Lists were introduced in Chapter 3 with several extensive examples. Even so, some major list features weren’t touched on. We’ll take a look at some more advanced features here.

With all list widgets, you can intervene in the middle of the list rendering to provide some intermediate formatting to list items or to insert dividers between rows. After a brief review of those features, we will add a Filter List widget to News to implement a search feature. This is a good example of a dynamic list, something you can use in many different types of applications.

Formatters

The formatters property is a hash of property names to formatter functions, like this:

{timeValue: this.myTimeFormatter, dayOfWeek: this.dayIndexToString, ... }

Before rendering the relevant HTML templates, the formatter functions are applied to the objects used for property substitution. The keys within the formatters hash are property names to which the formatter functions should be applied.

The original objects are not modified, and the formatted properties are given modified new names so that the unformatted value is still accessible from inside the HTML template. Formatted values have the text “Formatted” appended to their names. In the example above, the HTML template could refer to #{timeValueFormatted} in order to render the output from the myTimeFormatter() function. Formatter functions receive the relevant property value as the first argument, and the appropriate model object or items element ...

Get Palm webOS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.