art-template客户端基础语法

template 使用

https://aui.github.io/art-template/zh-cn/docs/installation.html

模板渲染

<!-- 引入第三方库 -->
<script src="/template.js"></script>
<!-- 每一个模板都要有不同的id type属性是为了显示语法高亮 -->
<script type="text/html" id="tpl">
	<span>{{@ name}}</span>
	<span>{{age}}</span>
</script>

<script>
    // 渲染模板
	var body = document.querySelector('body')
    var html = template('tpl', {
        name: '<b>zs</b>',
        age: 23
    })
    body.innerHTML = html
</script>

模板语法

原文输出

如果数据中携带 HTML 标签, 默认情况下 , 模板引擎不会解析标签 , 会将其转义后原文输出

<h2>{{@ name}}</h2>

条件判断

{{if 条件}}... {{else}}...{{/if}}
{{if 条件}}... {{else if 条件}}...{{/if}}

{{if age > 18}}
  <div>age 大于 18</div>
{{else if age == 17}}
  <div>age == 17</div>
{{else}}
  <div>age 小于 15</div>
{{/if}}

循环

{{each data}}
	{{$value}} {{$index}}
{{/each}}

<script type="text/html" id="tpl">
	<ul>
    	{{each data}}
    	<li>
    		<span>{{$value.name}}</span>
    		<span>{{$value.age}}</span>
    	</li>
    	{{/each}}
    </ul>
</script>
<script>
	var body = document.querySelector('body')
    var html = template('tpl', {data: [{name: 'zs', age: 23}, {name: 'ls', age: 33}]})
    body.innerHTML = html
</script>

导入模板变量

允许访问 javascript 中定义的变量

// 工具函数在 非全局作用域 
<script src="./template-web.js"></script>
<script type="text/html" id="tpl">
  <div>{{$imports.dateFormat(time)}}</div>
</script>
<script>
  window.addEventListener('load', function () {
    var container = document.querySelector('.container')
    // 非全局作用域需要使用 下面语法手动导入原生方法
    template.defaults.imports.dateFormat = dateFormat
    var html = template('tpl', {time: new Date()})
    // 时间格式化 
    function dateFormat(date) {
      return `${date.getFullYear()}日${date.getMonth() + 1}月${date.getDate()}日`
    }
    container.innerHTML = html
  })
</script>

// 工具函数在 全局作用域
<script src="./template-web.js"></script>
<script type="text/html" id="tpl">
  <div>{{$imports.dateFormat(time)}}</div>
</script>
<script>
  var container = document.querySelector('.container')
  var html = template('tpl', {time: new Date()})
  function dateFormat(date) {
    return `${date.getFullYear()}日${date.getMonth() + 1}月${date.getDate()}日`
  }
  container.innerHTML = html
</script>