Js-template-art "two" syntax

I. Template Syntax 1, variable use and output

if (user) {%>  or: {{if  user}}   <H2>{{USER.NAME}}</H2>{{/IF}}

Art-template supports both {{expression}} minimalist syntax and arbitrary JavaScript expressions <% expression %> .

2. Original output

{{@value}} or <%-value%>

The original output statement does not HTML escape the content

3. Conditions

{{if value}} ... {{/if}} {{if v1}} ... {{elseif v2}} ... {{/if}} or if if Else {%> ... <%}%>

4. Circulation

{each target}}    {{$index}} {{$value}} {{/each}} or  for (var i = 0; i < target.length; i++) {%>    <%= i%> <%= target[i]%><%}%>

1. targetSupported Array Object iterations with default values of$data
2. $valueAnd $index can be customized:{{each target val key}}

5. Variables

{{Set temp = Data.sub.content}} or var

6. Template inheritance

{{extend './layout.art 'head '} ... {{/block}} or function () {%> ... <%})%>

Template inheritance allows you to build a basic template "skeleton" that contains common elements of your site.

7. Sub-template

{include './header.art'./header.art ' Data}} or <% include ('./header.art ')%><% include ('. /header.art ', data)%>

includeThe second parameter is the default value $data .

8. Print output

<% print (Val, val2, Val3)%>

9. Filter

// to import global variables into a template function (date, format) {/*[code:] */  function(value) {return value * 1000};

Because the imports defined global variable has a higher precedence than the Normal template variable, it is recommended to use a prefix for naming $ .

{{date | $timestamp | $dateFormat ' Yyyy-mm-dd hh:mm:ss '}} or <%= $dateFormat ($timestamp (date), ' Yyyy-mm-dd hh: Mm:ss ')%>

{{value | filter}}The filter syntax resembles the pipe operator, with its previous output as the next input.

10, compressed HTML, JS, CSS

Template.defaults.minimize = true;

Art-template's page compression is implemented in the compile phase, so it does not affect rendering speed at all and can speed up network transmission. There is a limitation, however, that it does not handle unclosed HTML tags properly, so include be careful when using statements to load template fragments.

Avoid writing a template like this:

< Body > or: </ Body ></ HTML >

Use template inheritance instead include to avoid such problems.

11. Commissioning

template.defaults.debug=trueonce set, it will set the following options:

{    false,    false,false,           True}

debugDefault configuration:

• Node environment =process.env.NODE_ENV !== ‘production‘
• Browser environment =false

12. Global Variables

1) built-in variable list

• $dataData passed into the template{Object|array}
• $importsAll variables imported externally, equivalent template.defaults.imports{Object}
• printString output function{function}
• includeChild template Loading function{function}
• extendTemplate Inheritance Template Import function{function}
• blockTemplate Block Declaration function{function}

2) Inject global variables

Template.defaults.imports. $console = console; <% $console. Log (' Hello World ')%>

All variables outside the template need to be template.defaults.imports injected and declared before the template can be compiled for use.

13. Compounding grammar Rules

1) Modify the delimiter

Art-template supports modifying default template qualifiers {{}} with <%%> :

// Native Syntax qualifier rule template.defaults.rules[0].test =/<% (#?) ((?:==|=#| [=-])?) ([\w\w]*?) (-?) %>/; // the rules of the template.defaults.rules[1].test of art syntax =/{{\s* ([@#]?) (\/?) ([\w\w]*?) \s*}}/;

2) Add syntax

From a simple example, let the template engine support ${name} parsing of ES6 template strings:

Template.defaults.rules.push ({    /\${([\w\w]*?)} /,    function(match, code) {        return  {            Code:code,            ' Escape '}}    );

This test is the matching string regular, which use is the call function after the match. About use functions:

• Parameters: One parameter is the matching string, and the remaining parameters receive test regular grouping matches
• Return value: An object must be returned, code containing output two fields:
  • codeConverted JavaScript Statements
  • outputType of description code , optional value:
    • ‘escape‘Output after encoding
    • ‘raw‘Output original content
    • falseDo not output any content

It is worth mentioning that the syntax rules have no effect on rendering speed, and the template engine compiler will help you optimize rendering performance.

Js-template-art "two" syntax