artTemplate uses native javascript syntax by default, similar to the tiny template engine tmpl. The difference is that the template of artTemplate will use the sandbox mechanism to limit the reading and writing of the global object, which can largely avoid the maintenance problem of the template: if the template refers to an external object, as the complexity of the project increases, then At that time, no one can determine whether the variables in the template are data or global objects. Such complex dependencies will bring huge maintenance costs to the project. In the design of artTemplage, public methods and data are managed by the template.helper() method, which not only meets the needs of defining public helper methods, but also avoids maintenance problems caused by relying on external objects.
As we all know, the syntax of javascript is very free, and the use of native syntax for template logic statements has almost no learning cost for javascript developers. But it is undeniable that the logic of the template is mostly used by conditional expressions and loop expressions, and the use of native syntax is a bit like hitting mosquitoes with a cannon, and pure javascript syntax is not so easy for page designers to grasp, so It is still necessary to design a simple and easy-to-use template syntax.
The javascript template engine syntax is nothing more than three types:
1. The native grammar school that advocates power and freedom
<h3><%=title%></h3>
<ul>
<% for (i = 0, l = list.length; i < l; i ++) { %>
<li>name: <%=list[i].user%>; url: <%=list[i].site%></li>
<% } %>
</ul>
2. Advocating clean and neat illogical school
<h3>{{title}}</h3>
<ul>
{{#list}}
<li>name: {{user}}; url: {{site}}</li>
{{/list}}
</ul>
Among them, the native grammar school is represented by tmpl, and the logicless school is represented by Mustache. The native grammar school and the illogical school have their own advantages and disadvantages: tmpl grammar is the most free and powerful, but the disadvantage is that it is not friendly to designers, and it is difficult to read; and Mustache is very friendly to designers and is also very conducive to template migration, but this The drawbacks of this kind of illogical syntax are also very obvious, and even the most basic array index value cannot be output.
3. The Moderate School that seeks a balance between functionality and ease of use
<h3>{{title}}</h3>
<ul>
{{#each list as val}}
<li>name: {{val.user}}; url: {{val.site}}</li>
{{/each}}
</ul>
Zhongyong has achieved a balance between functionality and ease of use, and this type of template syntax has also passed the test of industrial-level applications of back-end templates, and is relatively mature. The custom grammar extension of artTemplate also adopts this type of grammar. The above template example is written in artTemplate:
<h3>{title}</h3>
<ul>
{each list}
<li>name: {$value.user}; url: {$value.site}</li>
{/each}
</ul>
Note: Unless otherwise specified, the artTemplate syntax mentioned in the following article refers to the custom syntax.
Install the extension
Just merge template-syntax.js into template.js to complete the custom syntax extension installation.
expression
The statement enclosed by "{" and "}" symbols is the logical expression of the template. These two delimiters can be customized, and the corresponding configuration property interfaces are template.openTag and template.closeTag. For example using HTML comments as logical delimiters:
template.openTag = '<!--{';
template.colseTag = '}-->';
output expression
For content-encoding output:
{content}
Encoding prevents HTML strings from being included in the data, which can lead to XSS attacks.
output without encoding:
{echo content}
conditional expression
{if admin}
{content}
{/if}
{if user
'admin'} {content} {else if user
'007'} <strong>hello world</strong> {/if}
traverse expression
Either an array or an object can be traversed with each.
{each list}
<li>{$index}. {$value.user}</li>
{/each}
Where list is the name of the data to be traversed, $value and $index are system variables, $value represents the single content of the data, and $index represents the index value. These two variables can also be customized:
{each list as value index}
<li>{index}. {value.user}</li>
{/each}
Template contains expressions
Used to embed child templates.
{include 'templateID' data}
where 'templateID' is the ID of the external template, and data is the data passed to the 'templateID' template. If the data parameter is omitted, the data of the current template is passed in by default.
{include 'templateID'}
helper method
First use template.helper() to register public helper methods, such as a simple UBB replacement method:
template.helper('$ubb2html', function (content) {
return content
.replace(/\[b\]([^\[]*?)\[\/b\]/igm, '<b>$1</b>')
.replace(/\[i\]([^\[]*?)\[\/i\]/igm, '<i>$1</i>')
.replace(/\[u\]([^\[]*?)\[\/u\]/igm, '<u>$1</u>')
.replace(/\[url=([^\]]*)\]([^\[]*?)\[\/url\]/igm, '<a href="$1">$2</a>')
.replace(/\[img\]([^\[]*?)\[\/img\]/igm, '<img src="$1" />');
});
The way used in the template:
{$ubb2html content}
If the helper method has multiple parameters, separate them with a space:
{helperName args1 args2 args3}
artTemplate homepage: http://aui.github.com/artTemplate/