Templates

Templates in JaernCloud are implemented using the built-in template node. A node can invoke a template in two ways:
  • Declaring the node with an identifier that is identical to a template identifier and inserting the "..." template operator as its only child. For example div#template_element_id { ... }
  • Declaring a named or unnamed node that inherits from a template node and provides any template parameters as children.

The following example defines a global div#main_menu template node and inserts it into the view using the "..." template operator.

div#main_menu : template {
   ul {
      li {
         a { "Home" -> view#index }
      }
      li {
         a { "About" -> view#about }
      }
   }
}

view#index : html {
   body {
      div#main_menu { ... }
      div#content {
         h1 { "Template Example" }
      }
   }
}

This second example uses a columns template, with a left and right parameter, to provide the layout of the page:

template#columns {
   div.left_column {
      left?
   }
   div.right_column {
      right?
   }
}

view#index: html {
   body {
      div#main_menu { ... }
      div#content {
         h1 { "Template Example" }          
         div#columns : template#columns {
            // declare a 'left' node which the 'left?' parameter in the template will be resolved to:
            left : "This is the main content column"
            // the 'right' node for the 'right?' parameter:
            right {
               h3 { "The right column has markup" }
               p { "This is the right column content" }
            }
         }
      }
   }
}

As a variantion the columns template could have provided the "div#columns" node. In that case the view could use an unnamed node to use the template:

   h1 { "Template Example" }
   : template#columns {
      // here we assume that the template provides the "div#columns" node
   }

Last edited Oct 5, 2010 at 6:42 PM by jimmeyer, version 7

Comments

No comments yet.