当前位置：网站首页>模板引擎art-template

模板引擎art-template

2022-08-08 06:21:00 【Youser511】

模板引擎

之前渲染ul遇到问题

字符串拼接，html标签和js混淆在一起，修改起来非常麻烦

var str = `
        <li class="list-group-item">
          <span class="badge" style="background-color: orchid;">评论时间:${item.time}</span>
          <span class="badge" style="background-color:aquamarine;">评论人:${item.username}</span>
          ${item.content}
        </li>
        `

模板引擎网站

http://aui.github.io/art-template/zh-cn/docs/index.html

好处

  • 减少了字符串的拼接
  • 代码结构更简单
  • 代码易于阅读和维护

模板引擎使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1 导入模板引擎 -->
  <!-- 提供一个全局函数  template('模板的id',需要渲染的数据) -->
  <script src="./js/template-web.js"></script>
  <script src="./js/jquery.js"></script>
</head>
<body>

  <a href="#">百度</a>
  <a href="javascript:;">百度</a>

  <div id="container"></div>
  <!-- 3定义模板 -->
  <script type="text/html" id="tpl_user">
     <div>
       {
   {name}}------{
   {age}}
       <hr/>
       {
   {if flag === 0}}
        flag的值为0
       {
   {else if flag ===1}}
       flag的值为1
       {
   {/if}}
     </div>
     <ul>
      {
   {each hobby}}
      <li>索引为{
   {$index}}循环的值为{
   {$value}}</li>
      {
   {/each}}
     </ul>

     <h3>{
   {time | dateFormat}}</h3>
  </script>
  <script>

// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function(date){
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();
  return y + '-' + m + '-' + d;
}



  // 2  定义需要渲染的数据
  var data = {
    name:"zs",
    age:12,
    test:"<a href='#'>超链接</a>",
    flag:1,
    hobby:['吃','喝','玩','乐'],
    time:new Date()
  }

// template
console.log(template)

// 4调用template函数
var htmlStr = template('tpl_user',data);
console.log(htmlStr)

// 5渲染html结构
$("#container").html(htmlStr);

  </script>
</body>
</html>
原网站

版权声明
本文为[Youser511]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_45025670/article/details/126108122

边栏推荐

猜你喜欢

随机推荐