天天看点
返回

FE使用art-template

  1. 使用 template 时，第一个参数为模板的 id。第二个参数为传递到模板的数据，没有数据传递{}，但是不要不传，否则会出现意外，文档地址
  2. 最基础的使用 
<body>
  <div id="box"></div>
  <script type="text/html" id="boxTmp">
    姓名：{{name}}
  </script>
  <script src="./template-web.js"></script>
  <script>
    box.innerHTML = template('boxTmp', { name: 'xxx' })
  </script>
</body>
  1. 调用公共函数 
<body>
  <div id="box"></div>
  <script type="text/html" id="boxTmp">
    今天的日期是：{{format(date)}}
  </script>
  <script src="./template-web.js"></script>
  <script>
    // - 注意：不可以直接调用
    // function format() {}
    template.defaults.imports.format = function (date) {
      date = new Date(date);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return day + '/' + month + '/' + year;
    }
    box.innerHTML = template('boxTmp', { date: new Date() })
  </script>
</body>
  1. 循环遍历 
<body>
  <div id="box"></div>
  <script type="text/html" id="boxTmp">
    <ul>
      {{each list value i}}
        <li>{{value.name}}--{{i}}</li>
      {{/each}}
    </ul>
  </script>
  <script src="./template-web.js"></script>
  <script>
    let list = [
      {
        name: 'Apple',
        id: 1
      },
      {
        name: 'orange',
        id: 2
      },
      {
        name: 'banana',
        id: 3
      }
    ]
    box.innerHTML = template('boxTmp', { list })
  </script>
</body>
  1. 条件判断 
<body>
  <div id="box"></div>
  <script type="text/html" id="boxTmp">
    <ul>
      {{each list value i}}
        {{if i % 2 == 0}}
          <li><h1>{{value.name}}--{{i}}</h1></li>
        {{else}}
          <li>{{value.name}}--{{i}}</li>
        {{/if}}
      {{/each}}
    </ul>
  </script>
  <script src="./template-web.js"></script>
  <script>
    let list = [
      {
        name: 'Apple',
        id: 1
      },
      {
        name: 'orange',
        id: 2
      },
      {
        name: 'banana',
        id: 3
      }
    ]
    box.innerHTML = template('boxTmp', { list })
  </script>
</body>
  1. 过滤器
  • 本质上是一个函数 
<body>
  <div id="box"></div>
  <script type="text/html" id="boxTmp">
  // 多个参数使用逗号隔开
    今天的日期是：{{date,'time'|format}}
  </script>
  <script src="./template-web.js"></script>
  <script>
    // - 注意：不可以直接调用
    // function format() {}
    template.defaults.imports.format = function (date, type) {
      console.log(type); // time
      date = new Date(date);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return day + '/' + month + '/' + year;
    }
    // v3的方法，v4不再提供支持
    // template.helper('format', function (date) {})
    box.innerHTML = template('boxTmp', { date: new Date() })
  </script>
</body>
  1. 循环嵌套 
<body>
  <div id="box"></div>
  <script type="text/html" id="boxTmp">
    <ul>
      {{each list value i}}
        <li>
          {{value.name}}--{{i}}
          {{if value.address.length}}
            {{value.name}}--{{i}}
            <ul>
              {{each value.address ad idx}}
                <li>{{ad.name}}</li>
              {{/each}}
            </ul>
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </script>
  <script src="./template-web.js"></script>
  <script>
    let list = [
      {
        name: 'Apple',
        id: 1,
        address: [
          {
            name: '江西'
          },
          {
            name: '上海'
          },
          {
            name: '北京'
          }
        ]
      },
      {
        name: 'orange',
        id: 2,
        address: []
      },
      {
        name: 'banana',
        id: 3,
        address: [
          {
            name: '安徽'
          }
        ]
      }
    ]
    box.innerHTML = template('boxTmp', { list })
  </script>
</body>
  1. 嵌套循环-分离写法 
<body>
  <div id="box"></div>
  <script type="text/html" id="boxTmp">
    <ul>
      {{each list value i}}
        <li>
          {{value.name}}--{{i}}
          {{if value.address.length}}
            {{include 'childTmp' value.address}}
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </script>

  <script type="text/html" id="childTmp">
    <ul>
      {{each $data ad idx}}
        <li>{{ad.name}}</li>
      {{/each}}
    </ul>
  </script>

  <script src="./template-web.js"></script>
  <script>
    let list = [
      {
        name: 'Apple',
        id: 1,
        address: [
          {
            name: '江西'
          },
          {
            name: '上海'
          },
          {
            name: '北京'
          }
        ]
      },
      {
        name: 'orange',
        id: 2,
        address: []
      },
      {
        name: 'banana',
        id: 3,
        address: [
          {
            name: '安徽'
          }
        ]
      }
    ]
    box.innerHTML = template('boxTmp', { list })
  </script>
</body>
  1. 解析html标签
html js 模板引擎 art-template
上一篇: C++ 读文件 将文件内容读入到字符串string中的方法
下一篇: Koa（七）：art-template 模板引擎

继续阅读