zoukankan      html  css  js  c++  java
  • ArtTemplate 使用笔记

    新一代 javascript 模板引擎:artTemplate-3.0

    下载地址:https://github.com/aui/artTemplate
    快速上手请参考:https://github.com/aui/artTemplate

    通过阅读artTemplate原文,基本上都会运用了,不再重述。

    主要的是如何运用数组

    例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>AtrTemplate</title>
     6 </head>
     7 <body>
     8     <div id="content"></div>
     9 
    10     <script src="js/template-native.js"></script>
    11     <script id="test" type="text/html">
    12         
    13         <%for( i = 0; i < content.length; i++) {%>
    14         <h1><%=content[i].title%></h1>
    15         <p>条目内容 : <%=content[i].list%></p>
    16         <%}%>
    17         
    18     </script>
    19 
    20     <script>
    21 
    22         var data = {
    23             content : [
    24                 {
    25                     title: "artTemplate",
    26                     list: "新一代 javascript 模板引擎",
    27                 },
    28                 {
    29                     title: "特性",
    30                     list: "性能卓越,执行速度快"
    31                 }
    32             ]
    33         };
    34         var html = template('test',data);
    35 
    36         document.getElementById("content").innerHTML = html;
    37     </script>
    38 </body>
    39 </html>

     深层运用:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>AtrTemplate -- 简介</title>
     6 </head>
     7 <body>
     8     <div id="content"></div>
     9 
    10     <script src="js/template-native.js"></script>
    11     <script id="listtemp">
    12 
    13     </script>
    14     <script id="test" type="text/html">
    15         
    16         <%for( i = 0; i < content.length; i++) {%>
    17         <h1><%=content[i].title%></h1>
    18         <ul>
    19             <%for( j = 0; j < content[i].list.length; j++) {%>
    20                 <li> <%=content[i].list[j]%></li>
    21             <%}%>
    22         </ul>
    23         <%}%>
    24         
    25     </script>
    26 
    27     <script>
    28 
    29         var data = {
    30             content : [
    31                 {
    32                     title: "artTemplate",
    33                     list: ["新一代 javascript 模板引擎"]
    34                 },
    35                 {
    36                     title: "特性",
    37                     list: [
    38                             "性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍",
    39                             "支持运行时调试,可精确定位异常模板所在语句",
    40                             " 对 NodeJS Express 友好支持",
    41                             "安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)",
    42                             " 支持include语句",
    43                             "可在浏览器端实现按路径加载模板",
    44                             "支持预编译,可将模板转换成为非常精简的 js 文件",
    45                             "模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选",
    46                             "支持所有流行的浏览器"
    47                         ]
    48                 }
    49             ]
    50         };
    51         var html = template('test',data);
    52 
    53         document.getElementById("content").innerHTML = html;
    54     </script>
    55 </body>
    56 </html>

     

  • 相关阅读:
    eharts入门篇一
    手机侧滑导航栏
    用js+cookie实现商城的购物车功能
    实现文字底部居中
    超出两行或三行显示省略号
    clear-fix清除浮动的两种写法
    sass学习入门篇(三)
    如何回答面试中问到的Hibernate和MyBatis的区别
    设计模式之--单例模式
    设计模式之---工厂模式
  • 原文地址:https://www.cnblogs.com/zmh7057/p/4103964.html
Copyright © 2011-2022 走看看