How to use template plug-in in JavaScript?-JS Tutorial-php.cn

How to use template plug-in in JavaScript?

青灯夜游

Release： 2018-09-13 17:02:39

Original

2566 people have browsed it

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>

Copy after login

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>

Copy after login

3) Use data to render template

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

Copy after login

artTemplate Concise syntax introduction:

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

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

Copy after login

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 }} // 显示内容为：热爱的游戏

Copy after login

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>

Copy after login

5) Traversal expression

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

Copy after login

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

How to use template plug-in in JavaScript?

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

Copy after login

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!