Template使用总结

最近用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)}} <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

猜你喜欢