A directive is a command to make PURE understand where in the HTML we want an action.

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 Selector string .
Please refer to the W3C documentation if you’re not familiar with them.

Notes:

• A single attribute or node is expected here. If the selectors return various nodes, only the first will be considered by PURE.
  

• Standard 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’.

• 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: String, Function, Array

The action indicates what will be done with this selected element or attribute.
We have 3 types of actions: a string, a function or an array.

String

To place a value in the HTML:

Here we place a single value to an attribute or a node value.

var context = {"firstName":"Mary"};
var directive = { 'span.who' : 'firstName' };

• ‘span.who’ : select the SPAN with a class called ‘who’
• ‘firstName’ : set the node value of the SPAN to the value of ‘firstName’
  sub-properties can be accessed too, with the following notations obj.name or obj[‘name’]

To repeat a portion of the HTML

Here we have a repetitive data and expect to repeat for each item a portion of the HTML.

var context = 
{"lines":[
  {"name":"Mary"}, 
  {"name":"Jane"},
  {"name": "Sandy"}
]};
var directive = { 'tbody tr' : 'line <- lines' }

• ‘tbody tr’ : select the TR
• ‘line <- lines’ : points to an array from the context and will trigger a repetition.
  During the loop, each item will have the name ‘line’ and you can reference it later. i.e.: line.name

More about repetitions…

Function

Here we can specify a function as an action.

var context = 
{"lines":[
  {"name":"Mary"}, 
  {"name":"Jane"},
  {"name": "Sandy"}
]};

var directive = { 'tbody tr[class]' : 
function(context, items, pos){
  var oddEven =  (pos % 2 == 0) ? 'even' : 'odd';
  var firstLast = (pos == 0) ? 'first': (pos == items.length -1) ? 'last':'';
  return oddEven + ' ' + firstLast; 
}}

• ‘tbody tr[class]’ : select the class attribute of the TR
• function(…){…} : evaluate the function and return its value to the selected element

More about Javascript Functions as Directives

Array of directives

If we want to set various directives for a same selector we can use an array of directives:

'ul.nav2 li' : [ 'sub2 <- sub1.subMenu', 'sub2.name']

• ‘ul.nav2 li’ : select the first LI in the UL with a class ‘nav2’
• [‘sub2 <- sub1.subMenu’, ‘sub2.name’] : apply the two directives
  • ‘sub2 <- sub1.subMenu’ : repeat the LI, for each records at sub1.subMenu
  • ‘sub2.name’ : set the node-value of the LI to the value of sub2.name