JavaScript template engine Template.js using detailed _javascript tips

Template.js a JavaScript template engine, simple and easy to use. Provides a set of template syntax, the user can write a template block, each time according to the incoming data, generate the corresponding data generated HTML fragment, rendering different effects. Https://github.com/aui/artTemplate

1, characteristics

(1), performance excellence, execution speed is usually mustache and Tmpl 20 times (Performance Test) (2), support Run-time debugging, can pinpoint the exception template where the statement (demo)

(3), to Nodejs Express friendly support (4), security, the default to escape the output, running the compiled code in the sandbox (node version can safely execute the user uploaded template)

(5), supporting include statements

(6), can be in the browser-side implementation by Path loading template (details)

(7), support precompilation, can transform the template into a very compact JS file

(8), template statement Concise, no prefix reference data, there is a concise version and the original syntax version optional

(9), support all popular browsers

2. Grammar

(1), using

An engine version that references concise syntax, such as: <script src= "Dist/template.js" ></script>

(2), expression

The statement wrapped by the {{and}} symbol is a logical expression of the template.

(3), Output expression

Output to content encoding: {{content}}
output NOT encoded: {{#content}}}
encoding protects against the presence of HTML strings in the data and avoids XSS attacks.

(4), conditional expression

{{if admin}} 
 <p>admin</p> 
{Else if code > 0}} 
 <p>master</p> 
{{else}} 
 <p>error !</p> 
{{/if}}} 

(5), traversal expression

Either an array or an object can be traversed with each.

{{Each list as value Index}} 
 <li>{{index}}-{{value.user}}</li> 
{{/each}} 

can also be abbreviated:

{{Each list}} 
 <li>{{$index}}-{$value .user}}</li> 
{{/each}}} 

(6), template contains an expression

Used to embed a child template.

{{include ' Template_name '}}}

The child template defaults to share the current data, and you can specify the data:{{include ' Template_name ' News_list}}

(7), auxiliary methods

Register the Public Assistance method with Template.helper (name, callback):

Template.helper (' DateFormat ', function (date, format) { 
 //.. 
 return value; 
}); 

mode used in the template: {{time | dateformat: ' YYYY-MM-DD hh:mm:ss '}}
support for incoming parameters and nesting use: {{Time | say: ' CD ' | ubb | link}}

3. Example

<! DOCTYPE html> 
 
 

<! DOCTYPE html> 
 
 

<! DOCTYPE html> 
 
 

<! DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.