最近用art-template进行前端数据绑定,之前看到了解这个前端引擎的介绍网站,里面只是笼统的介绍怎么用each进行循环以及if如何用,可是遇到以下问题。
一、如何使用if..else呢?之前我就相当然以为应该是
{{if v1}} ... {{/if}}
{{else}}....{{/else}}
结果总是报错,查了很多资料,才知道应该是这样
{{if v1}}
{{else}}
{{/if}}
跟想象中不太一样啊!
二、include的使用(子模板的使用)
之前看到文档介绍可以从其他目录引入模板,也就是模板继承
结果浏览器总报错,官网的解释是浏览器版本没有文件读取的能力。这个功能仅限于nodeJS。迫于无奈,只有include引入,
但这个引入只能是在本页面
<div id="main"></div>
<script type="text/html" id="Template">
<!--引入子模板-->
{{include 'scoreTemplate' $Photos}} <!-- $是必不可少的 -->
</script>
<script id="scoreTemplate" type="text/html">
{{each Photos}}
<div>{{$value.Id}}</div>
<div>{{$value.type}}</div>
{{/each}}
</script>
<script>
var data = {
Photos:[
{
Id: 3,
type: 1
},
{
Id: 4,
type: 2
}]
}
var html = template('Template', data);
$("#main").html(html);
</script>
但是有个需求是展示一些特定的照片,判断有没有这种照片的src,如果没有则显示没有 该照片的提示语,想着可不可
以include出个模板,子模板里得img相当个变量接收{{include 'scoreTemplate2' $img1}} 里的值
<div id="main"></div>
<script type="text/html" id="Template2">
<!--引入子模板-->
{{include 'scoreTemplate2' $img1}} <!-- $是必不可少的 -->
{{include 'scoreTemplate2' $img2}} <!-- $是必不可少的 -->
{{include 'scoreTemplate2' $img3}} <!-- $是必不可少的 -->
{{include 'scoreTemplate2' $img4}} <!-- $是必不可少的 -->
</script>
<script type="text/html" id="scoreTemplate2" >
{{if (img && img.length>0)}}
<img src="{{img}}" alt="添加照片的图标" class="cover" />
{{else}}
<img src="/Content/Img/auth-p.png" alt="添加照片的图标" />
<h6>没有该照片</h6>
{{/if}}
</script>
<script>
var data = {
img1: "img1-url",
img2: "img2-url",
img3: "img3-url",
img4: "img4-url"
}
var html = template('Template2', data);
$("#main").html(html);
</script>
结果发现全部都显示没有该照片
无奈下改成这样(把子模板中img变量改为了img1,变成只是针对图img1的模板)
<div id="main"></div>
<script type="text/html" id="Template2">
<!--引入子模板-->
{{include 'scoreTemplate2' $img1}} <!-- $是必不可少的 -->
{{include 'scoreTemplate2' $img2}} <!-- 图案不能显示出来 -->
{{include 'scoreTemplate2' $img3}} <!-- 图案不能显示出来 -->
{{include 'scoreTemplate2' $img4}} <!-- 图案不能显示出来-->
</script>
<script type="text/html" id="scoreTemplate2" >
{{if (img1 && img1.length>0)}} <!-- 与传来的值名字必须一样! img1 与include 的传值 $img1 一样 -->
<img src="{{img1}}" alt="添加照片的图标" class="cover" />
{{else}}
<img src="/Content/Img/auth-p.png" alt="添加照片的图标" />
<h6>没有该照片</h6>
{{/if}}
</script>
<script>
var data = {
img1: "img1-url",
img2: "img2-url",
img3: "img3-url",
img4: "img4-url"
}
var html = template('Template2', data);
$("#main").html(html);
</script>
然后图片就出来了,可是这样的话,只能针对一张图写一个子模板,那这个模板抽出来跟没抽出来不是两样吗?
为了满足需求,我就只能改变数据格式了
<script type="text/html" id="Template2">
<!--引入子模板-->
{{include 'scoreTemplate2' $img1}} <!-- $是必不可少的 -->
</script>
<script type="text/html" id="scoreTemplate2" >
{{if (url && url.length>0)}} <!-- 与传来的值名字必须一样! img1 与include 的传值 $img1-->
<img src="{{url}}" alt="添加照片的图标" class="cover" />
{{else}}
<img src="/Content/Img/auth-p.png" alt="添加照片的图标" />
<h6>没有该照片</h6>
{{/if}}
</script>
<script>
var data = {
img1: { url: "img1-url" },
img2: { url:"img2-url"},
img3: { url:"img3-url"},
img4: { url: "img4-url" }
}
var html = template('Template2', data);
$("#main").html(html);
</script>
tip:
官网文档:
https://aui.github.io/art-template/docs/index.html
详细的include教程
http://www.cnblogs.com/ningyanbo/p/4615186.html