博客
关于我
Ajax编程扩展---学习笔记
阅读量:337 次
发布时间:2019-03-04

本文共 9496 字,大约阅读时间需要 31 分钟。

文章目录

一、模板引擎

1.1模板引擎概述

作用:使用模板引擎提供的模板语法,可以将数据和 HTML 拼接起来。
官方地址: https://aui.github.io/art-template/zh-cn/index.html

1.2使用步骤

  1. 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
<script src="./js/template-web.js"></script>
  1. 准备 art-template 模板
 <script id="tpl" type="text/html">     <div class="box"></div> </script>
  1. 告诉模板引擎将哪一个模板和哪个数据进行拼接
var html = template('tpl', {   username: 'zhangsan', age: '20'});
  1. 将拼接好的html字符串添加到页面中
 document.getElementById('container').innerHTML = html;
  1. 通过模板语法告诉模板引擎,数据和html字符串要如何拼接
<script id="tpl" type="text/html">     <div class="box"> {   {    username }} </div> </script>

也可以实现循环。

例子:

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Document</title>	<!-- 1. 将模板引擎的库文件引入到当前页面 -->	<script src="/js/template-web.js"></script></head><body&g