今天再给大家带点html5前端开发的干货模板“text/tpl”怎么用 script template怎么用
text/tpl 顾名思义就是模板,其实和C++模板函数类似的作用,就是利用他生成一个HMTL内容,然后append或者替换html里面
有什么好处,假如后端返回来的数据都是一样的,但是需要生成不同的内容时候,这个时候使用模板减少代码量是最好的,我只需要定义不同模板,调用同一个id就写同一个生成代码就行了,这就是模板好处,就不用写那么多js的字符串++操作,烦死人了
下面介绍怎么用
template定义
<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>
<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怎么用的更多相关文章
- HTML5页面开发的基础性模板
分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta ...
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- 资料,来自HTML5前端开发学习⑤群
resource HTML5+CSS3视频教程:http://pan.baidu.com/s/1hsyOjze 密码:c3uw JavaScript视频教程:链接:http://pan.baidu.c ...
- html5前端开发笔记-个人中心
简单的css自适应 PC端 *** 移动端 *** ) *** 一开始的想法就是模仿手机APP 的页面进行布局,首先得有个头部,然后是主题部分,然后加上2个按钮,分别是编辑和退出登录.先布出基本结构. ...
- 前端开发神级IDE-sublime text
汉化并自动带常用插件的版本下载地址:http://www.cr173.com/soft/55484.html 1.修改auto_complete快捷键:首选项>设置-默认>ctrl+f搜索 ...
- 国人Web前端开发必备干货,一个完美支持IE6在内所有浏览器的CSS框架
摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...
- 什么是web前端开发?
Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及F ...
- web前端开发学习:jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- Sublime Text 使用指南 - 前端开发神器
Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的 ...
随机推荐
- WPF textblock加入超链接
<TextBlock Grid.Row=" Margin="75,0,0,0"> <Hyperlink Name="BlogHl" ...
- android表白app
一.前言 马上就要520和521了,是不是还有像我一样的单身狗啊.我就知道有,所以这两天简单写了这个小程序(其实是替别人写的),虽然我并不会用去骗女孩子(因为最近太忙了,实习完之后要搞毕设,要搞论文啊 ...
- Rust初步(四):在rust中处理时间
这个看起来是一个很小的问题,我们如果是在.NET里面的话,很简单地可以直接使用System.DateTime.Now获取到当前时间,还可以进行各种不同的计算或者输出.但是这样一个问题,在rust里面, ...
- Android随笔之——Android广播机制Broadcast详解
在Android中,有一些操作完成以后,会发送广播,比如说发出一条短信,或打出一个电话,如果某个程序接收了这个广播,就会做相应的处理.这个广播跟我们传统意义中的电台广播有些相似之处.之所以叫做广播,就 ...
- geotrellis使用(七)记录一次惨痛的bug调试经历以及求DEM坡度实践
眼看就要端午节了,屌丝还在写代码,话说过节也不给轻松,折腾了一天终于解决了一个BUG,并完成了老板安排的求DEM坡度的任务,那么就分两段来表. 一.BUG调试 首先记录一天的BUG调试,简单copy了 ...
- Thinking in React
本文翻译自React的官方博客,详情请阅读原文. React非常适合构建组件化的应用,它注重高性能,因此组建的重用,项目的扩展都十分灵活,Facebook和instagram的不少商业项目使用了此框架 ...
- 1Z0-053 争议题目解析685
1Z0-053 争议题目解析685 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 685.In your test database: -You are using Recover ...
- Struts2环境下Tomcat启动异常:Exception starting filter struts2,报了一个java.lang.ClassNotFoundException
在写一个struts2+hibernate整合的小例子时,启动Tomcat服务器,报了一个: 严重: Exception starting filter struts2java.lang.ClassN ...
- HTML5 视频(一)
HTML5 提供了展示视频的标准 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 一 ...
- Android 学习Activity(1)activity和intent
工具是:JDK环境配置+SDK+ADT工具 一.Activity 主要作用: 1.用户与应用程序的接口 2.控件的容器 二.创建Activity要点:(在src中的目录下包里) 1.一个Activi ...