JS Rendering Engine Tempo.js

1. Introduction of Tempo.js

<script src= "Js/tempo.js" type= "Text/javascript" ></script>

2. Prepare the data (standard JSON data)

var data = [{' Name ': {' First ':' Leonard ',' Last ':' Marx '},' Nickname ':' Chico ',' Born ':' March 21, 1887 ',' Actor ':True' Solo_endeavours ': [{' Title ':' Papa Romani '}]},{' Name ': {' First ':' Adolph ',' Last ':' Marx '},' Nickname ':' Harpo ',' Born ':' November 23, 1888 ',' Actor ':True' Solo_endeavours ': [{' Title ':' Too many Kisses ',' Rating ':' Favourite '},{' Title ':' Stage Door canteen '}]},{' Name ': {' First ':' Julius Henry ',' Last ':' Marx '},' Nickname ':' Groucho ',' Born ':' October 2, 1890 ',' Actor ':True' Solo_endeavours ': [{' Title ':' Copacabana '},{' Title ':' Mr Music ',' Rating ':' Favourite '},{ ' title ':  ' Double Dynamite '}]},{ ' name ': { ' Marx '}, ' nickname ':  ' Gummo ',  ' born ':  ' Marx '}, ' nickname ':  ' born ':  ' February, 1901 ',  ' actor ': true, ' solo_endeavours ': [{ ' A Kiss in the Dark '}]}];           

3.tempo.prepare (). Render () usage (need to find the container that hosts the data)

<script language= "javascript" type= "Text/javascript" > $ (function () {Tempo.prepare (' container ID for rendering data '). Render (data source);}); </script>

4.data-template (HTML data display)

<ScriptType="Text/javascript" >$(function () { var data1 = {‘Leonard ':‘Leonard Marx ',‘Adolph ':‘Adolph Marx ',‘Julius ':‘Julius Henry Marx ',‘Milton ':‘Milton Marx ',‘Herbert ':‘Herbert Marx '}; var data2 = [{‘Name ': {‘First ':‘Leonard ',‘Last ':‘Marx '},‘Nickname ':‘Chico ',‘Born ':‘March 21, 1887 ',‘Actor ':True‘Solo_endeavours ': [{‘Title ':‘Papa Romani '}]},{‘Name ': {‘First ':‘Adolph ',‘Last ':‘Marx '},‘Nickname ':‘Harpo ',‘Born ':‘November 23, 1888 ',‘Actor ':True‘Solo_endeavours ': [{‘Title ':‘Too many Kisses ',‘Rating ':‘Favourite '},{‘Title ':‘Stage Door Canteen '}]}, {‘Name ': {‘First ':‘Milton ',‘Last ':‘Marx '},‘Nickname ':‘Gummo ',‘Born ':‘October 23, 1892 '},{‘Name ': {‘First ':‘Herbert ',‘Last ':‘Marx '},‘Nickname ':‘Zeppo ',‘Born ':‘February 25, 1901 ',‘Actor ':True‘Solo_endeavours ': [{‘Title ':‘A Kiss in the Dark '}]};Tempo.prepare ("List1 "). Render (DATA1);Tempo.prepare ("List2 "). Render (DATA2);  });</Script><Fieldset> <Legend> Simple Data display</Legend> <OlId="List1" >  <LiData-templateData-from-map>{{value}}-{{key | append ' @marx. com '}}</Li> </Ol></Fieldset><Fieldset> <Legend> Nested data display</Legend> <OlId="List2" >  <LiData-template>  {{Nickname}} {{Name.last}}   < ul>   Span class= "indent" > <li  Data-template-for= "solo_endeavours" >{{title}}</< Span class= "title" >li>   </ ul>  </< span class= "tag" >li> </ol></FIELDSET>    

5. Formatting the field data

{{Field |Truncate25[,' Optional_suffix '}} to intercept string usage: {{field name |Truncate length}}{{field | format[, Numberofdecimals]}} The number of digits after the decimal is reserved use method: {{field name |format number of bits}}{{field |default  ' default value '}} if the field is undefined and the value is null the defaults displayed How to use: {{field name | default  ' default value '}} {{Field | date  ' preset or pattern like hh:mm, dd-mm-yyyy ' [, date  ' Yyyy-mm-dd HH:mm:ss '}} {{field | trim}} Clear start and end spaces {{field | upper}} Change the value of any lowercase characters to uppercase. {{field | lower}} changes the value of any lowercase characters to lower case. {{field | titlecase[,  ' Strings '}}}} The caption is filtered not to display the character {{field | append  The string to be added '}} If field is not empty, add suffix and other string {{field | prepend  ' some prefix join  ' separator '}} If this field is an array, add an item to the array     

6. Field value escaping

Tempo.prepare (' Marx-brothers ', {' Escape ': false}). Render (data);

7. Template.when (type, handler)

Value of type event types

• • TempoEvent.Types.RENDER_STARTING: Template Replacement starts
  • TempoEvent.Types.ITEM_RENDER_STARTING: Data Item substitution started
  • TempoEvent.Types.ITEM_RENDER_COMPLETE: Data Item Replacement complete
  • TempoEvent.Types.RENDER_COMPLETE: Template Replacement complete
  • TempoEvent.Types.BEFORE_CLEAR: Before you clean up your data
  • TempoEvent.Types.AFTER_CLEAR: After cleaning up the data?

Handler (function () {})

8. Handling of events before and after loading data, event registration

1.tempo.prepare (' tweets '). When (TempoEvent.Types.RENDER_STARTING,function (event) { $(' #tweets '). addclass (' Loading ');}). When (TempoEvent.Types.RENDER_COMPLETE,function (event) { $(' #tweets '). Removeclass (' Loading ');}). render (data);2.template.starting () call Start event manuallyvar template = Tempo.prepare (' tweets '). When (TempoEvent.Types.RENDER_STARTING,function (event) {  $(' #tweets '). addclass (' Loading '); }). When (TempoEvent.Types.RENDER_COMPLETE, < span class= "keyword" >function  (event) {   $ ( ' #tweets '). Removeclass ( function ( Data) { Template.render (data.results);}); 3. JQuery Live () event $ ( ' ol Li '). Live ( "click", function () { // do something with The clicked Element alert (this);        

9. Conditional selection Template If....else ...

%}   //{% Else%} is an optional block 

data-if-Field name = "Value"  <li data-template  Data-if-sex= "mother" >{{name}}</a> </li>data-has= "Is there a field"  < li data-template data-has=  "Ifbianzhong" >{{name}}</a> </li>data-src= "{{field name |append '. png '}}"  <img src= "1.gif" data-src= "{{image| Append '. png '}} "/>             

JS Render engine tempo.js