art-template | 易学教程

模板语法概述

art-template 支持两种模板语法：标准语法和原始语法；标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。

标准语法使用 {{ 数据 }} 表示，也称之为小胡子语法；原始语法使用 <%= 数据 %> 表示；在模板语法中不仅可以显示数据，也可以书写合理的 js 表达式最终会显示处理后的结果。

渲染模板

template(filename, content)：根据模板名渲染模板；返回值为渲染后的 html 字符串（具体情况可以看官方文档）

参数：

filename 需要渲染的 HTML 模板文件路径，或 HTML 代码段的 id
content 需要渲染的数据，其值为一个对象，用于给模板中的插值表达式传递数据；如果没有需要渲染的数据可以设置为一个空对象 {}

举个例子：

template.html 根据 id 渲染模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="node_modules/art-template/lib/template-web.js"></script>
  </head>
  <body>
    <!-- 模板代码段 -->  
    <script type="text/template" id="tp">
      <p>芳名:{{ name }}</p>
      <p>芳龄:<%= age %></p>
      <p>gender:<%= gender %></p>
      <p>hobby:{{ each hobbies }} {{ $value }} {{ /each }}</p>
    </script>

    <script type="text/javascript">
      // 渲染模板
      var ret = template('tp', {
        name: '小小',
        age: 18,
        gender: 'girl',
        hobbies: ['movie', 'basketball', 'swimming']
      })
      // 打印
      console.log(ret)
    </script>
  </body>
</html>

在这里插入图片描述

根据路径渲染模板

artTemplate.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
      <p>芳名:{{ name }}</p>
      <p>芳龄:{{ age }}</p>
      <p>gender:{{ gender }}</p>
      <p>hobby:{{ each hobbies }} {{ $value }} {{ /each }}</p>
  </body>
</html>

artTemplate.js

// 引入相关模块
const path = require('path')
const template = require('art-template')
// 根据路径渲染模板
let data = template(path.join(__dirname, './artTemplate.html'), {
  name: '小小',
  age: 18,
  gender: 'girl',
  hobbies: ['movie', 'basketball', 'swimming']
})
// 打印渲染后的数据
console.log(data)

在这里插入图片描述

模板语法

原文输出

如果数据中携带了 HTML 标签，art-template 为了安全考虑默认不会解析数据中的标签，会对标签进行转义处理；通过指定的语法也可以让标签具有语义（解析标签，原文输出）

标准语法：{{@ 数据 }} （@ 符与数据之间的空格不能省略）

原始语法：<%- 数据 %>

来源：CSDN

作者：蓬莱老仙

链接：https://blog.csdn.net/weixin_44486539/article/details/103591444

标签

art-template

html代码