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用法可以去百度了解更多。

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

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

  1. HTML5页面开发的基础性模板

    分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta ...

  2. 前端开发 JavaScript 干货知识点汇总

    很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...

  3. 资料,来自HTML5前端开发学习⑤群

    resource HTML5+CSS3视频教程:http://pan.baidu.com/s/1hsyOjze 密码:c3uw JavaScript视频教程:链接:http://pan.baidu.c ...

  4. html5前端开发笔记-个人中心

    简单的css自适应 PC端 *** 移动端 *** ) *** 一开始的想法就是模仿手机APP 的页面进行布局,首先得有个头部,然后是主题部分,然后加上2个按钮,分别是编辑和退出登录.先布出基本结构. ...

  5. 前端开发神级IDE-sublime text

    汉化并自动带常用插件的版本下载地址:http://www.cr173.com/soft/55484.html 1.修改auto_complete快捷键:首选项>设置-默认>ctrl+f搜索 ...

  6. 国人Web前端开发必备干货,一个完美支持IE6在内所有浏览器的CSS框架

    摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...

  7. 什么是web前端开发?

    Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及F ...

  8. web前端开发学习:jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  9. Sublime Text 使用指南 - 前端开发神器

    Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的 ...

随机推荐

  1. js修改后没反应-看看是不是取的缓存

  2. LINQ系列:Linq to Object分组操作符

    分组是指根据一个特定的值将序列中的值或元素进行分组.LINQ只包含一个分组操作符:GroupBy. GroupBy 1>. 原型定义 public static IQueryable<IG ...

  3. 【Win 10应用开发】多窗口视图

    Windows App一般情况下,同一时刻只能有一个应用程序实例在运行,为了在特殊需求下可以同时呈现不同的UI,SDK提供了多视图操作支持. 应用程序可以创建新的应用视图,以新的视图为基础可以呈现与主 ...

  4. Tomcat调优及JMX监控

    Tomcat调优及JMX监控 实验背景 ====================================================== 系统版本:CentOS release 6.5 ( ...

  5. 通过3个Hello World应用来了解ASP.NET 5应用是如何运行的(3)

    设置自定义的入口程序体现应用本身与应用托管之间的分离,它使我们可以创建独立于托管环境的应用,并根据需要寄宿于任何一个我们希望的宿主程序下,对于Web应用来说这一点尤为重要.对于之前的Web应用来说,I ...

  6. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  7. 浅谈requireJS

    项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requi ...

  8. 浅谈webWorker

    一.webWorker之初体验 在"setTimeout那些事儿"中,说到JavaScript是单线程.也就是同一时间只能做同一事情. 也好理解,作为浏览器脚本语言,如果JavaS ...

  9. ASP.NET:注销功能实现

    原理:清空Session 1.Web窗体:index.aspx <a href="logoutHandler.ashx">注销</a> 2.一般处理程序:L ...

  10. Microsoft Build 2015 汇总

    简要概括(GitHub 完成约 45%): Visual Studio Code Preview(意料之外) Visual Studio 2015 RC Visual Studio 2013 Upda ...