What is a directive ?

A directive is an action PURE will perform on the HTML template.

It is a javascript object with the following format:

{ Selector : Action,  ... }

Selector

To indicate where we want the action to take place in the HTML, we use the same notation as a CSS Selector string.

Please refer to the W3C documentation if you're not familiar with them.

Notes:

  • W3C selectors always point to a node of the HTML.
    But we need to set values to attributes too.
    We decided to hack a bit the syntax of selectors to get a convenient notation.
    The notation span#who@class with PURE means select the attribute 'class' from the span with the id 'who'. While the W3C says select the span with the id 'who' that has an attribute 'class'.
  • A single selector can point to an attribute or multiple nodes. If the selectors return various nodes, they will be processed sequentially.
  • You can use multiple selectors, by separating them with a coma. eg: 
    'span.sel1, span.sel2, span.sel3'
  • Use the selector '.' (dot) to select the root element of the template (revision > 1.5)
  • Use the selector '@attName' to select the attribute attName of the root element of the template
  • There is another exception to the standard selector syntax. Look at [[The + notation to append/prepend values]] for more information.

Action

The action indicates what will be done with this selected element or attribute.

We have 3 types of actions: