1.機能
テンプレートエンジンによって提供されるテンプレート構文を使用して、データとHTMLを一緒にスプライスできます。
使用する
- アートテンプレートテンプレートエンジンライブラリファイルをダウンロードし、HTMLページにライブラリファイルを含めます
<script src="./../template-web.js"></script>
- アートテンプレートテンプレートを準備する
<script id="tpl" type="text/html">
<h1>{
{
username}} {
{
age}}</h1>
</script>
- どのテンプレートとどのデータをステッチするかをテンプレートエンジンに指示します
<script>
// 1. 模板id 2. 数据 对象类型
// 方法的返回值就是拼接好的字符串
var html = template('tpl', {
username: 'zhangsan',
age: '30'
})
document.getElementById('container').innerHTML = html;
</script>
- テンプレート文法を使用して、データとHTML文字列をつなぎ合わせる方法をテンプレートエンジンに指示します
コード例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<!-- 下载art-template模板引擎库文件并在HTML页面中引入库文件 -->
<script src="/js/template-web.js"></script>
<!-- 准备art-template模板 -->
<script id="tpl" type="text/html">
<h1>{
{
username}} {
{
age}}</h1>
</script>
<!-- 告诉模板引擎将哪一个模板和哪一个数据进行拼接 -->
<script>
// 1. 模板id 2. 数据 对象类型
// 方法的返回值就是拼接好的字符串
var html = template('tpl', {
username: 'zhangsan',
age: '30'
})
document.getElementById('container').innerHTML = html;
</script>
<!-- 将拼接好的html字符串添加到页面中 -->
<!-- 通过模板语法告诉模板引擎，数据和html字符串要如何拼接 -->
</body>
</html>