?? ?// json數(shù)據(jù)
?? ?var json=[
?? ??? ?{
?? ??? ??? ?"id": 1,
?? ??? ??? ?"good_sign": 2,
?? ??? ??? ?"good_img": "http://dummyimage.com/460x440/ee79f2/79f2cb.png&text=商品\n"
?? ??? ?},
?? ??? ?{
?? ??? ??? ?"id": 2,
?? ??? ??? ?"good_sign": 1,
?? ??? ??? ?"good_img": "http://dummyimage.com/460x440/f2a779/8479f2.png&text=商品\n"
?? ??? ?},
?? ??? ?{
?? ??? ??? ?"id": 3,
?? ??? ??? ?"good_sign": 0,
?? ??? ??? ?"good_img": "http://dummyimage.com/460x440/91f279/f279b4.png&text=商品\n"
?? ??? ?},
?? ??? ?{
?? ??? ??? ?"id": 4,
?? ??? ??? ?"good_sign": 1,
?? ??? ??? ?"good_img": "http://dummyimage.com/460x440/79d7f2/f2e979.png&text=商品\n"
?? ??? ?}
?? ?]
?? ?// 渲染json
?? ?$("#container").html(template("indexmain",json));

	<div id="container"></div>
	
	<script type="text/html" id="indexmain">
		<!-- 商品列表 -->
		<ul>
			{{each list item}}
			<li>
				<a href="javascript:;" rel="external nofollow" >
					{{if item.good_sign==1}}
					<div class="ico-comm i-mark">
						 <span>新品</span>
					</div>
					{{else if item.good_sign==2}}
					<div class="ico-comm i-mark">
						 <span>熱賣(mài)</span>
					</div>
					{{/if}}
					<img src="{{item.good_img}}" alt="商品圖">
				</a>
			</li>
			{{/each}}
		</ul>
	</script>	

art-template的基本使用(判斷語(yǔ)句、循環(huán)、子模板的使用)
//數(shù)據(jù)來(lái)源
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '02.art');
const html = template(views, {
? ? name: '張三',
? ? age: 17,
? ? content: '<h1>我是標(biāo)題</h1>'
})
console.log(html);

?<p>{{ name }}</p> //使用大括號(hào)的方式輸出數(shù)據(jù)
?<p>{{1+1}}</p>//在括號(hào)內(nèi)可以實(shí)現(xiàn)基本運(yùn)算
?<p>{{1+1==2?'相等':'不相等'}}</p>//在括號(hào)內(nèi)可以實(shí)現(xiàn)三目運(yùn)算
?{{@ content }}//如果要引入包含html標(biāo)簽的數(shù)據(jù) 標(biāo)準(zhǔn)語(yǔ)法必須在中括號(hào)前加上@

?<p><%=name%></p>
?<p><%=1+1==2?'相等':'不相等'%></p>
?<p><%- content%></p>//要引入包含html標(biāo)簽的數(shù)據(jù)，就要把=號(hào)換成-

? ? ? {{if age>18}} 年齡大于18
? ? ? {{else if age<15}}年齡小于15
? ? ? {{else}}年齡不符合要求
? ? ? {{/if}}

//其實(shí)就是先用<%%>把整個(gè)判斷語(yǔ)句包含起來(lái) ?然后if(){%><%}else if(){%><%}else{%><%}
? ? ? <% if(age>18){%>
? ? ? 年齡大于18
? ? ? <%}
? ? ? else if(age<15){%>年齡小于15<%}
? ? ? else{%>年齡不符合要求<%}
? ? ? %>

//數(shù)據(jù)來(lái)源
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '03.art');
const html = template(views, {
? ? users: [{
? ? ? ? name: '張三',
? ? ? ? age: 20,
? ? ? ? sex: '男'
? ? }, {
? ? ? ? name: '李四',
? ? ? ? age: 30,
? ? ? ? sex: '男'
? ? }, {
? ? ? ? name: '瑪麗',
? ? ? ? age: 15,
? ? ? ? sex: '女'
? ? }]
});
console.log(html);

? ?<ul>
? ? ?{{each users}}//users 就是被循環(huán)的數(shù)據(jù)
? ? ?<li>{{$value.name}}</li>//value就是循環(huán)得出的數(shù)據(jù)
? ? ?<li>{{$value.age}}</li>
? ? ?<li>{{$value.sex}}</li>
? ? ?{{/each}}
? ? ?</ul>

<ul>
//跟if語(yǔ)句的原始語(yǔ)法一樣 ?其實(shí)也是把整個(gè)for循環(huán)語(yǔ)句用<%%>包含起來(lái) ? 然后for(){%><%} ?里面js的for怎么寫(xiě) ?這里還是怎么寫(xiě)
? ? ? ? <% for(var i=0;i<users.length;i++){%>
? ? ? ? <li><%=users[i].name%></li>
? ? ? ? <li><%=users[i].age%></li>
? ? ? ? <li><%=users[i].sex%></li>
? ? ? ? <%} %>
? ? ?</ul>

{{include './common/header.art'}}
<div>{{msg}}</div>
{{include './common/footer.art'}}

<% include ('./common/header.art')%>
<div><%=msg%></div>
<% include ('./common/footer.art')%>