This is the sixth day of my participation in the August Text Challenge.More challenges in August

art-template

Art-template is a minimalist, ultra-fast templating engine. It uses scoped pre-declaration techniques to optimize template rendering speed for performance close to JavaScript limits, and supports both NodeJS and browsers.

With the template engine, we only need to modify the HTML content in the HTML file. DOM manipulation is also a bit more efficient with a template engine.

Grammar:

Art-template supports both template syntax.

Standard syntax makes templates easier to read and write; Primitive syntax has powerful logical processing power.

Standard grammar

{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
Copy the code

Primitive syntax (much like EJS)

The < %if (user) { %>
<h2><%= user.name %></h2>The < %} % >Copy the code

Quick learning

Write templates to store templates with a script tag of type= “text/ HTML”

<script id="test" type="text/html">
    <h1>{{ title }}</h1>
    <ul>
        {{each list as value i}}
            <li>Index {{I +1}}: {{value}}</li>
        {{/each}}
    </ul>
</script
Copy the code

Apply colours to a drawing template

var data = {
    title: 'theme'.list: ['eat'.'sleep'.'Beat the beans']};var html = template('test', data);
document.getElementById('#test').innerHTML = html;
Copy the code

The installation

Installation method:

Install via NPM: NPM install art-template –save Download the installation and compile in your browser

Because browsers do not support file systems, template(filename, data) does not support passing in a file path. It uses document.getelementByid (filename).innerhtml internally to get the template, for example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <! Template-web.js -->
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div id="container"></div>
    <! Create template with script tag -->
    <! -- 1. Type ="text "/ this can be HTML,template... Script "-->
    <! Add id to script tag (id = template id)
    <! The template script tag must precede the script tag called by the template() method.
    <script type="text/html" id="tpl">
        {{if user}}
        <h2>{{user.name}}</h2>
        {{/if}}
    </script>
    <script>
        var user = {
            name: 'Template username'
        }
        var html = template('tpl', {user: user})
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>
Copy the code

grammar

1, the output

Standard grammar

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
Copy the code

The original grammar

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
Copy the code

2. Output of the original text

Standard grammar

{{@ value}}
Copy the code

Original grammar I

<%- value %>
Copy the code

3. Conditional output

Standard grammar

<! Single -ifJudgment - > {{if value}} 
... 
{{/if}} <! --if.else. Judgment - > {{if v1}} 
... 
{{else if v2}}
 ... 
{{/if}}
Copy the code

The original grammar

<! Single -ifJudgment - > < %if(value) { %> ... The < %} % > <! --if.else. Judgment - > < %if(v1) { %> ... The < %else if(v2) { %> ... The < %} % >Copy the code

4. Loop output

Standard grammar

{{each target}}
  {{$index}} {{$value}}
{{/each}}
Copy the code

Target is an array, each is used to iterate over the array, index is the index of the array, index is the index of the array, and value is the value of the array

The original grammar

The < %for (var i = 0; i < target.length; i++) { %>
<%= i %> <%= target[i] %>
<% } %>
Copy the code

Note:

Target supports iteration of array and object. The default value is data. Data is actually the total data object (raw data object) passed to the template.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/html" id="tpl">
        <ul>
            {{each user.arr}}
            <li>
                {{$index + 1}} ---- {{$value.type}} ---- {{$value.price}}
                {{$data}}
            </li>
            {{/each}}
        </ul>
    </script>
    <script>
        var user = {
            obj: {
                name: 'Bruce Lee'.age: 32.gender: 'male'
            },
            arr: [{type: 1.price: 10},
                {type: 2.price: 12},
                {type: 3.price: 18}}]var html = template('tpl', {user: user})
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>
Copy the code

{{each target val key}}

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/html" id="tpl">
        <h4>Each iterates through the array using the default index $index and the default value $value</h4>
        <ul>
            <! $index = $value; $index = $value;
            {{each user.arr}}
            <li>
                {{$index}} ---- {{$value}}
            </li>
            {{/each}}
        </ul>

        <h4>Each traverses the number group, using the custom index B and the default value A</h4>
        <ul>
            <! -- each traverses the array using a custom index b and the default value a -->
            {{each user.arr b a}}
            <li>
                {{a}} ---- {{b}}
            </li>
            {{/each}}
        </ul>

        <h4>Each traverses the object with the default key $index and the default value $value</h4>
        <ul>
            <! -- each traverses the object using the default key $index and the default value $value -->
            {{each user.obj}}
            <li>
                {{$index}} ---- {{$value}}
            </li>
            {{/each}}
        </ul>

        <h4>Each traverses the object using a custom key and a custom value val</h4>
        <ul>
            <! -- each traverses the object using a custom key and a custom value val -->
            {{each user.obj val key}}
            <li>
                {{key}} ---- {{val}}
            </li>
            {{/each}}
        </ul>
    </script>
    <script>
        var user = {
            obj: {
                name: 'Bruce Lee'.age: 32.gender: 'male'
            },
            arr: [{type: 1.price: 10 },
                { type: 2.price: 12 },
                { type: 3.price: 18}}]var html = template('tpl', { user: user })
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>
Copy the code