How to use template plug-in in JavaScript?

This chapter will introduce you to how to use the template plug-in in JavaScript and understand how to use the template plug-in. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Plug-in introduction: template is a high-performance JavaScript template engine.

Plug-in features:

1. Excellent performance and fast execution speed (more than 20 times that of mustache and tmpl);

2. Supports runtime debugging and can accurately locate exceptions The statement where the template is located;

3. Has good support for NodeJS Express;

4. Safe, the output is escaped by default;

5. Can be used in the browser End-to-end implementation of loading templates by path;

6. Supports pre-compilation, which can convert templates into very streamlined js files;

7. Introduction to template statements, no need for prefixes to reference data, and a concise version and native versions are available;

8. Support all popular browsers;

Get started (there are two syntaxes, this article introduces the introductory syntax)

1) The artTemplate template must use a script tag of type="text/html" to store the template (the tag is HTML);

<script type="text/html"></script>

2 ) Start writing your own template

<script id="model" type="text/html">
     <h1>{{title}}</h1>
     <ul>
         {{each list as value index}}
             <li>{{index+1}}、{{value}}</li>
         {{/each}}
     </ul>
 </script>

3) Use data to render template

var data ={
     title: '热爱的游戏',
     list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 }; var html = template('model',data); document.getElementById('box').innerHTML = html

artTemplate Concise syntax introduction:

1 ) Before use, you need to quote the version with concise syntax, for example:

<script src="template.js"></script>

2) Expression:

Statements wrapped by {{ and }} symbols are template expressions.

3) Output expression:

Output with content encoding: {{ title }}

Output without encoding content: {{ #title }}

// 假如有这样一段数据，title 内出现了标签  var data ={
      title: &#39;<i>热爱的</i>游戏&#39;,
      list: [&#39;LOL&#39;,&#39;王者农药&#39;,&#39;梦三国&#39;,&#39;魔兽争霸&#39;,&#39;其它&#39;]
 }; {{ title }}  // 显示内容为：<i>热爱的</i>游戏 {{ #title }} // 显示内容为：热爱的游戏

4) Conditional expression

<script id="model" type="text/html">
    <h1>{{ title }}</h1>
    <ul>　　　　　// 判断条件自定
        {{if list.length>0}}
            {{each list as value index}}
                <li>{{index+1}}、{{value}}</li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

5) Traversal expression

{{each list as value index}}
    <li>{{index+1}}、{{value}}</li>
{{/each}}// 也可以被简写为
{{each list}}
    <li>{{$index+1}}、{{$value}}</li>
{{/each}}

artTemplate method:

There are two parameter values ​​in the template function.
The first parameter represents the template that needs to be compiled (fill in the ID of the template)
The second parameter is the data that needs to be filled into the template, and the return value is the compiled HTML string;

artTemplate default configuration

Code example:

<script id="people" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{if peos.length>0}}
            {{each peos as p index}}
                <li>
                    {{index+1}}、
                    选手姓名：<span>{{p.name}</span>&#x3000;
                    年龄：<span>{{p.age}}</span>
                </li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

<script>
    var data2 ={
        title: &#39;喜欢的职业选手&#39;,
        peos: [
            {
                name: "<b>Uzi</b>",
                age: 20
            },
            {
                name: &#39;Clearlove7&#39;,
                age: 20
            },
            {
                name: &#39;Korol&#39;,
                age: 21
            }
        ]
    }
    // 默认为true 不编译 输出为 <b>Uzi</b>　　//  false 编译 是否编码输出 HTML 字符
    template.config("escape",false); 
    var html2 = template(&#39;people&#39;,data2);
    document.getElementById(&#39;box2&#39;).innerHTML = html2;
</script

The above is the detailed content of How to use template plug-in in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!