今天再给大家带点html5前端开发的干货模板“text/tpl”怎么用 script template怎么用

text/tpl 顾名思义就是模板，其实和C++模板函数类似的作用，就是利用他生成一个HMTL内容，然后append或者替换html里面

有什么好处，假如后端返回来的数据都是一样的，但是需要生成不同的内容时候，这个时候使用模板减少代码量是最好的，我只需要定义不同模板，调用同一个id就写同一个生成代码就行了，这就是模板好处，就不用写那么多js的字符串++操作，烦死人了

下面介绍怎么用

template定义

1、首页模板

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

< 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、模板二定义

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

< 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();

我只需要写同一个生成代码即可

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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);            }        });

比如可以看我的33小游戏怎么用，需要使用chrome浏览器切换到移动模式审核元素才可以看到 ，是不是看起来代码简单了好多啊，不用为每一个内容做不同的生成操作。一统天下

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

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

下面介绍下mustache一些简单知识，详情可以具体去百度了解更多谢谢。

1	{{#posts}} {{/posts}} 因为我的数据结构是一个个post组成的数组，post 有link  title 等属性，所以这标签意思是循环使用，每个post生成一个#是开始/是这个post结束，里面的

{{link}} {{title}}是把当前的这个post的属性填进去。具体关于mustache用法可以去百度了解更多。

下一期将介绍瀑布流怎么制作