Template

401 views

Published on

Prototype Javascript

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
401
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Template

  1. 1. Module Template
  2. 2. Template <ul><li>The Template class provides a much nicer and clearer way of achieving this formatting. </li></ul><ul><li>The templates consist of five types as described below </li></ul><ul><li>1) Straight forward templates </li></ul><ul><li>2) Templates are meant to be reused </li></ul><ul><li>3) Escape sequence </li></ul><ul><li>4) Custom syntaxes </li></ul><ul><li>5) Moduleindex </li></ul>
  3. 3. Straight forward templates <ul><li>The Template class users a basic formatting syntax, </li></ul><ul><li>The templates are created from strings that have embedded symbols in the form #{fieldName} that will be replaced by actual values when the template is applied (evaluated) to an object. </li></ul><ul><li>Examples; </li></ul><ul><li>// the template (our formatting expression) </li></ul><ul><li>   var myTemplate = new Template('The TV show  #{title}  was created  by #{author}.'); </li></ul><ul><li>   // our data to be formatted by the template </li></ul><ul><li>  var show = { title : 'The Simpsons',  author : 'Matt Groening', network: ‘ FOX' }; </li></ul><ul><li>   // let's format our data </li></ul><ul><li>   myTemplate.evaluate(show); </li></ul><ul><li>   // > The TV show The Simpsons was created by Matt Groening. </li></ul>
  4. 4. Templates are meant to be reused <ul><li>The following example shows the template being used with a handful of distinct objects. </li></ul><ul><li>Example; </li></ul><ul><li>//creating a few similar objects </li></ul><ul><li>var conversion1 = {from: 'meters', to: 'feet', factor: 3.28}; </li></ul><ul><li>var conversion2 = {from: 'kilojoules', to: 'BTUs', factor: 0.9478}; </li></ul><ul><li>var conversion3 = {from: 'megabytes', to: 'gigabytes', factor: 1024}; </li></ul><ul><li>  </li></ul><ul><li>  //the template   </li></ul><ul><li>var templ = new Template('Multiply by #{factor} to convert from #{from} to #{to}.'); </li></ul><ul><li>  //let's format each object </li></ul><ul><li>[conversion1, conversion2, conversion3].each( function(conv){ </li></ul><ul><li>templ.evaluate(conv); }); </li></ul><ul><li>  // -> Multiply by 3.28 to convert from meters to feet. </li></ul><ul><li>  // -> Multiply by 0.9478 to convert from kilojoules to BTUs. </li></ul><ul><li>  // -> Multiply by 1024 to convert from megabytes to gigabytes. </li></ul>
  5. 5. Escape sequence <ul><li>For these situations there's an escape sequence - the backslash character ( .) </li></ul><ul><li>Example; </li></ul><ul><li>  // note: you're seeing two backslashes here because the  backslash is also a  </li></ul><ul><li>    // escaping character in JavaScript strings </li></ul><ul><li>   var  t =  new  Template( 'in  #{lang} we also use the #{variabl syntax for templates.'); </li></ul><ul><li>   var   data  =  { lang:'Ruby', variable: '(not used)' }; </li></ul><ul><li>   t. evaluate ( data ); </li></ul><ul><li>   // > in Ruby we also use the #{variable} syntax for templates </li></ul>
  6. 6. Custom syntaxes <ul><li>The Template's constructor accepts an optional second argument that is a regular expression object to match the replaceable symbols in the template string. </li></ul><ul><li>The template that uses a syntax similar to the ubiquitous <%= %> constructs. </li></ul><ul><li>Example; </li></ul><ul><li>var  syntax = /(^|.| | )(<%=s*(w+)s*%>)/; </li></ul><ul><li>  //matches symbols like  '<%= field %>‘ </li></ul><ul><li>    var  t =  new  Template( '<div>Name: <b><%= name %></b>, Age: <b> <%=age%></b></div>' , syntax); </li></ul><ul><li>   t.evaluate( {name:  'John Smith' , age:  26 } );  // -> <div>Name: <b>John Smith</b>, Age: <b>26</b></div> </li></ul><ul><li>  </li></ul>
  7. 7. Moduleindex <ul><li>evaluate(object) -> String </li></ul><ul><li>Applies the template to the given object’s data, producing a formatted string with symbols replaced by corresponding object’s properties. </li></ul><ul><li>Examples; </li></ul><ul><li>var  hrefTemplate =  new  Template( '/dir/showAll?lang= #{language}&categ=#{category}&lv=#{levels}'); </li></ul><ul><li>var  selection = {category:  'books'  , language:  'en-US' }; </li></ul><ul><li>  </li></ul><ul><li>hrefTemplate. evaluate (selection); </li></ul><ul><li>        // -> '/dir/showAll?lang=en-US&categ=books&lv=' </li></ul><ul><li>  </li></ul><ul><li>hrefTemplate. evaluate ({language:  'jp' , levels:  3 , created:  '10/12/2005' }); </li></ul><ul><li>        // -> '/dir/showAll?lang=jp&categ=&lv=3' </li></ul><ul><li>  </li></ul><ul><li>hrefTemplate. evaluate ({}); </li></ul><ul><li>        // -> '/dir/showAll?lang=&categ=&lv=‘ </li></ul><ul><li>hrefTemplate. evaluate ( null ); </li></ul><ul><li>        // -> error ! </li></ul><ul><li>  </li></ul>

×