今天再給大家帶點html5前端開發的干貨模板“text/tpl”怎么用 script template怎么用

text/tpl 顧名思義就是模板，其實和C++模板函數類似的作用，就是利用他生成一個HMTL內容，然后append或者替換html里面

有什么好處，假如后端返回來的數據都是一樣的，但是需要生成不同的內容時候，這個時候使用模板減少代碼量是最好的，我只需要定義不同模板，調用同一個id就寫同一個生成代碼就行了，這就是模板好處，就不用寫那么多js的字符串++操作，煩死人了

下面介紹怎么用

template定義

1、首頁模板

<script type="text/tpl" id="game-tpl">
{{#posts}}
<div class="item item-box">
	<div class="item-top">
		<a href="{{link}}" title="{{title}}">
			<div class="pic">
				<img data-original="{{thumb}}" width="60" height="60" alt="{{title}}">
			</div>
		</a>
		<div class="info">
			<a href="{{link}}" title="{{title}}">
				<div class="name">{{title}}</div>
			</a>
			http://www.33xyx.com/" title="{{title}}">
				<div class="dl-btn">
					<span>在線玩</span>
				</div>
			</a>
		</div>
	</div>
	<div class="message">
		<div class="byte">
			{{#cat_tag}}
			<a class="line" href="link">{{name}}</a>
			{{/cat_tag}}
		</div>
	</div>
</div>
{{/posts}}
</script>

　　

2、模板二定義

<script type="text/tpl" id="game-tpl">
{{#posts}}
<div class="item">
	<div class="pic">
		<a href="{{link}}" title="{{title}}">
			<img data-original="{{thumb}}" width="66" height="66" alt="{{title}}">
		</a>
	</div>
	<a href="http://www.33xyx.com/dongzuo/" class="info" title="{{title}}">
		<div class="name">{{title}}</div>
		<div class="attr">
			{{#cat_tag}}
			<div class="kind">{{name}}</div>
			{{/cat_tag}}
		</div>
		<div class="star">
			<div class="star-num" style="width: 90%;">
			</div>
		</div>
	</a>
	<div class="down">
		<a class="pkg" href="33xyx" title="{{title}}">在線玩</a>
	</div>
</div>
{{/posts}}

</script>

　　

這個模板腳本標簽一般放到</body>下面，雖然接受的后端的數據結構都是一樣，但是我可以生成不同的內容，而不需要寫一大堆js的字符串++操作，

$post['thumb'] = $img_src[0];
$post['title'] = get_the_title();
$post['link'] = get_permalink();

我只需要寫同一個生成代碼即可

      jQuery.ajax({
                type: 'POST',
                url: http://www.33xyx.com/yizhi/,
                data: {
                    action: 'load_more',
                },
                success: function (data) {
                    console.log(data);
                    var template = $('#game-tpl').html();
                    Mustache.parse(template);   
                    var rendered = $(Mustache.render(template, data));
                    $("#J-games").append(rendered);
                }
            });

比如可以看我的html5網站怎么用，需要使用chrome瀏覽器切換到移動模式審核元素才可以看到 ，是不是看起來代碼簡單了好多啊，不用為每一個內容做不同的生成操作。一統天下

這里使用模板需要引用mustache.js

//cdn.bootcss.com/mustache.js/2.2.1/mustache.min.js

下面介紹下mustache一些簡單知識，詳情可以具體去百度了解更多謝謝。

{{#posts}} {{/posts}} 因為我的數據結構是一個個post組成的數組，post 有link  title 等屬性，所以這標簽意思是循環使用，每個post生成一個#是開始/是這個post結束，里面的

{{link}} {{title}}是把當前的這個post的屬性填進去。具體關於mustache用法可以去百度了解更多。

下一期將介紹瀑布流怎么制作