art-template 模板引擎

最新推荐文章于 2024-08-10 07:07:58 发布

webxiaoma

最新推荐文章于 2024-08-10 07:07:58 发布

阅读量1.2k

点赞数

分类专栏：编辑器以及各类工具文章标签：模板引擎 artTemplat webxiaoma 马新想

本文链接：https://blog.csdn.net/webxiaoma/article/details/76639729

版权

编辑器以及各类工具专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天我总结一下art-template 模板引擎这个框架，比较简单

一、文档，以及GitHub

文档: https://aui.github.io/art-template/docs/index.html

GitHub: https://github.com/aui/art-template

二、art-template 的书写方式：

1.原始语法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/artTemplate.js"></script>
</head>
<body>
<!--包裹元素-->
<div id="content"></div>


<script id="test" type="text/html">
    <%if(admin){%>
        <% for(var i=0; i<list.length; i++){%>
           <div><%=i%>:<%=list[i]%></div>
        <%}%>

    <%}else{%>
           <div>没有结果！</div>
    <%}%>

    <!--赋值方法-->
    <p><%=person.eatting()%></p>


    <h2><% a=person.age %></h2>
    <% for(var i=0;i<a.length;i++){ %>
      <p><%=a[i] %></p>
    <%}%>

    <!--$imports 代表console-->
    <% $imports.log('hello world') %>

</script>


<script type="text/javascript" src="js/art-template.js"></script>

<script type="text/javascript">
  var data = {
    admin: true,
    list : ["第一个元素","第二个元素"],
    person:{
     name:"Jhon",
      age:[23,24,54,36,56,23,64],
      eatting:function(){
        console.log("我吃了一个大西瓜");
      }
    }
  };

  template.defaults.imports.log = console.log; // 此处展示imports的作用

  var html = template('test',data);// test 为模板ID， data数据

  //  console.log(html)
  document.getElementById("content").innerHTML = html;
</script>
</body>
</html>