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. iOS 数据库的增删改查(OC版)

    自己写了几个方法来实现数据的增删改查功能: 首先在TARGETS--->>Build phases里面添加数据库所关联的库文件libsqlite3.tbd 添加完以后,在控制器上添加 #i ...

  2. js立即执行函数

    一.JS立即执行函数的写法 方式1.最前最后加括号 (function(){alert(1);}()); 方式2.function外面加括号   (function(){alert(1);})(); ...

  3. JavaScript Arguments.callee解释

    Arguments.callee : 返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文.[function.]arguments.callee可选项 functio ...

  4. java笔试题

    下面有关JVM内存,说法错误的是? A.程序计数器是一个比较小的内存区域,用于指示当前线程所执行的字节码执行到了第几行,是线程隔离的 B.Java方法执行内存模型,用于存储局部变量,操作数栈,动态链接 ...

  5. ASP.NET MVC之如何看待内置配置来提高性能优化(四)

    前言 前几篇我们比较基础的讲了下MVC中的知识,这一节我们穿插点知识,讲讲MVC中我们可以提高性能的办法. Razor视图引擎优化(优化一) 我们知道默认情况下配置MVC去解析一个视图会首先约定通过查 ...

  6. JSON入门指南--客户端处理JSON

    在传统的Web开发过程中,前端工程师或者后台工程师会在页面上写后台的相关代码,比如在ASP.NET MVC4里面写如下代码: @Html.TextBoxFor(m => m.UserName, ...

  7. 关于在BAE上部署ThinkPHP框架的问题

    现在有点小兴奋,因为在在BAE上部署ThinkPHP框架的问题快折腾一天了,午觉都没睡,不过没白整总算有点结果.不扯淡了,直入正题吧. 之前熟悉ThinkPHP框架,想在BAE上用ThinkPHP做点 ...

  8. 初试Code First(附Demo)

    写在前面 新建项目 安装EntityFramework程序包 创建模型 创建上下文DbContext 创建数据库.读/写数据 配置连接字符串 Code First 迁移 示例Demo下载 后记 以前逛 ...

  9. C++ 连接数据库的入口和获取列数、数据

    这里不具体放出完整的程序,分享两个核心函数: 由于这里用到的函数是编译器自己的库所没有的,需要自己下载mysql.h库或者本地有数据库,可以去bin找到,放进去. 前提,我自己的测试数据库是WampS ...

  10. iOS 保持界面流畅的技巧 (转载)

    这篇文章会非常详细的分析 iOS 界面构建中的各种性能问题以及对应的解决思路,同时给出一个开源的微博列表实现,通过实际的代码展示如何构建流畅的交互. Index 演示项目 屏幕显示图像的原理 卡顿产生 ...