artTemplate详解

作者: 蛋炒饭_By | 来源:发表于2018-03-28 16:42 被阅读39次

在实际开发中,我们会使用模板引擎来提高开发效率。而众多的模板引擎中,artTemplate无论就速度,兼容性还是使用人数上,都占绝对优势。这里我将简单地介绍下artTemplate的常见用法。

需要先使用一个type="text/html"的script标签存放模板

1.简单的json数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/template.js" ></script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="div">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</script>
<script type="text/javascript">
var data = {
name:"geekWeb",
age:22
}
var html = template('div',data);
document.getElementById("container").innerHTML = html;
</script>
</body>
</html>
2.带数组的json数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/template.js" ></script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="div">
<h1>{{name}}</h1>
<ul>
{{each lang as value i}}
<li>语言{{i+1}}:{{value}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
var data = {
name:"前端语言",
lang:['html','css','js']
}
var html = template('div',data);
document.getElementById("container").innerHTML = html;
</script>
</body>
</html>
3.数组中包含对象的json数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/template.js" ></script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="div">
<h1>{{name}}</h1>
<ul>
{{each lang}}
<li>语言:{{$value.title}} 定义:{{$value.add}}</li>
{{/each}}
</ul>
</script>
<script type="text/javascript">
var data = {
name:"前端语言",
lang:[{
title:"html",
add:"超文本标记语言"
},{
title:"css",
add:"层叠样式表"
},{
title:"javaScript",
add:"添加动态特效"
}]
}
var html = template('div',data);
document.getElementById("container").innerHTML = html;
</script>
</body>
</html>

一个ajax+artTemplate+servlet+fastjson的综合小实例

前台:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="template.js"></script>
<script>
//创建一个XMLHttpRequest类型的对象ajaxReq
var ajaxReq = new XMLHttpRequest();
window.onload = function() {
//用ajaxReq打开一个连接
ajaxReq.open("get","ajax.do",true);
//发送请求给服务器
ajaxReq.send(null);
//设置一个回调函数,用来处理服务器的回应。
ajaxReq.onreadystatechange = onReceive;
}

  function onReceive() {
    if (ajaxReq.readyState === 4) {
      if (ajaxReq.status === 200) {
        //响应成功,做一些事情
        var jsonObj = JSON.parse(ajaxReq.responseText);//不要忘记将json字符串转化为json对象
        var html = template('test', jsonObj);
        document.getElementById('content').innerHTML = html;
      } else {
        //响应失败,做一些事情
      }
    }
  };
</script>

</head>
<body>
<div id="content"></div>

<script id="test" type="text/html">
<table>
<thead>
<td>姓名</td>
<td>年龄</td>
</thead>
{{each list as value i}}
<tr>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
{{/each}}
</table>
</script>
</body>
</html>

后台:

public class Person {
public String name;
public int age;
}

public class Persons {
private List<Person> list;

public List<Person> getList() {
    return list;
}

public void setList(List<Person> list) {
    this.list = list;
}

}

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

/**

  • Created by ttc on 17-5-26.
    */
    @WebServlet(name = "Servlet",urlPatterns = "/ajax.do")
    public class Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    Person person = new Person();
    person.name = "huochai";
    person.age = 29;

     String strJson = JSON.toJSONString(person);
     System.out.println(strJson);
    
     Person person2 = new Person();
     person2.name = "huochai2";
     person2.age = 292;
    
     List<Person> lst = new ArrayList<Person>();
     lst.add(person);
     lst.add(person2);
    
     Persons persons = new Persons();
     persons.setList(lst);
    
     String strJson2 = JSON.toJSONString(persons);
     System.out.println(strJson2);
    
     PrintWriter pw = response.getWriter();
     pw.println(strJson2);
    

    }
    }

相关文章

  • artTemplate详解

    在实际开发中,我们会使用模板引擎来提高开发效率。而众多的模板引擎中,artTemplate无论就速度,兼容性还是使...

  • 百度模板

    引用script 模板语法 拓展: artTemplate artTemplate有两种语法,所以就有两...

  • 前端模版引擎 - art-template 【下】

    我们接着上篇 《 前端模版引擎 - artTemplate 【上】 》 继续讲解 artTemplate 的最新版...

  • baiduTemplate / artTemplate

    JS引擎模板 baiduTeplate 模板语法 提供一套模板语法,用户可以定义一个模板区块,每次根据传入的数据生...

  • artTemplate 总结

    编写模板 渲染模板 简介语法 方法 template(id,data) 根据id渲染模板,内部会根据documen...

  • arttemplate模板

    1. 2. {{each results as value key}} {{each}} 3.v...

  • Node artTemplate

    1.模板引擎 模板引擎是第三方模块。让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护。 2.a...

  • arttemplate在webpack中的配置与用法

    1.artTemplate在webpack中的配置 首先,npm下载,cnpm install --save-de...

  • artTemplate的使用

    用artTemplate已经有一段时间了,也是在比较了几款前端模版引擎之后决定使用它,因为它的使用方便以及性能卓越...

  • artTemplate学习笔记

    表达式{{}} js中存放模板var source = ' '+ '<% for (var i = 0; ...

网友评论

    本文标题:artTemplate详解

    本文链接:https://www.haomeiwen.com/subject/ajescftx.html