JS中的模板引擎art-template4.0使用

web.jpeg

art-template4.0

• javascript 模板引擎，官网：https://github.com/aui/art-template

• 其语法分为原生和简洁语法，本文主要介绍的简洁语法
• 优势就是语法规范简明,容易批量输出

基础数据渲染

1.引入模板文件

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

2.编写HTML文件模板

• Id属性自己定义，这是为了template查找的标识
• type="text/html" 告诉template 这是html模板

<script id="book_data" type="text/html">
    <h1>{{title}}</h1>
</script>

3.向编写HTML模板插入数据，并输出一个页面展示在浏览器上

- `template("fileName",data)` fileName就是html模板文件中的`Id`

<script>
    //数据
     var data = {
         title:"这是一个标题"
     }
    //获取到模板文件--渲染
    var contentData =  template("book_data",data);
    //获取 html的标签容器
     var warp = document.getElementById("warp");
    //展示内容
     warp.innerHTML = contentData;

</script>

注意: 编写的html模板文件中的数据属性title是data实例对象的数据属性title

流程控制语句

1.条件语句 if

• 注意:这是有开始就有结束{{if}}...{{/if}} 。{{/if}}表示结束

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

• 看看例子

    <!--html模板-->
<script id="test" type="text/html">

        {{if num1==9}}
            <h1>这{{num1}}</h1>
            {{else}}
        <h4>虚拟网卡计算机</h4>
        {{/if}}


</script>

<!--根据数据 输出-->
<script>

    var data = {
        num1:10,

    }

    //渲染模板
    var htmlContent = template("test",data);
    //获取标签
    var con = document.getElementById("con");

    con.innerHTML = htmlContent;

    console.log(htmlContent);


</script>

2.循环 遍历语句

{{each target}}
    {{$index}} {{$value}}
{{/each}}

• 例子

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

    <h2>{{title}}</h2>
    <ul>
<!--        判断 books 是否有值-->
        {{if books}}
             {{each books}}
                  <li>这是:{{$value}}</li>
              {{/each}}
        {{/if}}

    </ul>

</script>



<script>
    var data = {
        title:"图书信息",
        books: ["三国","西游","红楼梦","水浒传"]
    };

    //渲染模板
    var htmlContent = template("test_each",data);
    //获取标签
    var con = document.getElementById("con");

    con.innerHTML = htmlContent;

    console.log(htmlContent);

</script>

• 自定义

{{each target val key}}

{{/each}}

image.png image.png

调用自定义方法

// html 模板
<script id="test_con" type="text/html">
    <div>
        {{if c==100}}
        <ul>
            {{each person}}
            <li>姓名：{{$value.name}}--性别：{{$value.sex|show}}</li>
            {{/each}}
        </ul>

        {{/if}}
    </div>
</script>


//渲染
<script>
    var data = {
        c:100,
        person:[
            {name:"jack",age:18,sex:1},
            {name:"tom",age:19,sex:0},
            {name:"jerry",age:20,sex:0},
            {name:"kid",age:21,sex:1},
            {name:"jade",age:22,sex:0}
        ]
    };
    //自定义函数
    template.defaults.imports.show = function(sex){
        if(sex==0){
            return "男";
        }else if(sex == 1) {
            return "女";
        }
    }
    var html = template("test_con",data);
    document.getElementById("con").innerHTML = html;
</script>

image.png