-
使用 template 时,第一个参数为模板的 id。第二个参数为传递到模板的数据,没有数据传递{},但是不要不传,否则会出现意外,文档地址
-
最基础的使用
<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>
- 调用公共函数
<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>
- 循环遍历
<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>
- 条件判断
<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>
- 过滤器
- 本质上是一个函数
<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>
- 循环嵌套
<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>
- 嵌套循环-分离写法
<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>
- 解析html标签
{{#html}} 或者 {{@html}}