art-lemplate is a new generation of high-performance JavaScript template engine, which can combine data and HTML templates more friendly, save tedious string splicing, and make the code easier to maintain.
The art-template template engine can be used both on the server side and on the browser side. Here we only explain the use of the art-template template engine on the server side. How to download and use the art-template template engine is as follows.
(1) The template engine download command is as follows.
npm install artmplate
(2) When using a template engine, you should import the template engine in the j script and compile the template.
//导入模板
const template · require('art-template');
//编译模板
const result = template('./views/index.html', (
msg: 'Hello, art-template'
});
In the above code, rest is used to store the splicing result; the first parameter in template0 indicates the location of the template file, and the second parameter transfers the data to be spliced to the template, and the object type or object attribute can be used directly in the template. The an-template template engine standard syntax introduces variables and outputs, and supports JavaSeript expressions, making templates easier to read and write. The following explains the standard syntax of the art-template template engine.
1. Variables
In the "{ {}}" symbol, use the set keyword to define variable a and variable b. The sample code is as follows.
{
{
set a = 1}};
{
{
set b = 2}};
2. JavaScript expressions
In the "{ {}}" symbol, use the set keyword to define variable a and variable b. The sample code is as follows.
//JavaScript表达式
{
{
a ? b:c}};
{
{
a‖b}}1:
{
{
la + b}};
3. Conditional rendering
The art-template template engine uses { {f}}…{ {/if}} or { {if}}…{ { else if}}…{ {/if}} to achieve conditional judgment, and render different results through judgment , the sample code is as follows.
// if...语法
{
{
if user}}
<h2>{
{
user.name}}</h2>
{
{
/if}}
// if...else if...语法
{
{
if userl}}
<h1>{
{
user1.name}}</h1>
{
{
else if user2}}
<h2>{
{
user2.name}}</h2>
{
{
/if}}
In the above code, if the user object exists, the value of its name attribute will be rendered into the label. Similarly, use [if]]…lelse if]]…[if] syntax to realize multiple conditional judgments. If the userl user object exists, render the value of its name attribute into the label; if the user2 user object exists, render the value of its name attribute into the label.
4. List rendering
The list rendering in the at-lemplate template engine uses each to loop through the target object. The sample code is as follows.
{
{
each target}}
{
{
$index}}{
{
$value}}
{
{
/each}}
In the above code, the target target object supports the iteration of Amay array and Objecet object type data. The target target object is passed by the second parameter of the template (template ID, data) function, and accessed in the form of "data []" square brackets Properties of the template object. data[]” brackets to access the properties of the template object.d a t a [ ] " to access the attributes of the template object. index indicates the current index value, and $value indicates the value corresponding to the current index.