作用

适合用于定义模板(模板容器),不解析(渲染/执行)。

为什么这样使用

在js里面，经常需要使用js往页面中插入html内容。比如这样：

var number = 123;

$('#d').append('<div class="t">'+number+'</div>')

如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。

给设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，但是可以在另一个script里面通过获取，然后再通过相关的模板工具进行处理，插入到页面中。这样就把大段的HTML操作从js里面分离开了。

例子

http://www.cnblogs.com/zhuzhiyuan/p/3510175.html

可以在.html文件中定义：

<script type="text/x-jquery-tmpl" id="tmpl">

</script>

这样，在.js文件中就可以使用该模板：

var tmpl= $('#tmpl').tmpl({name:'tp'});

$('body').append(tmpl);

完整例子如下：

<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8'>

<title></title>

</head>

<body>

	<div id='container'>

	</div>

</body>

<script src="jquery.js"></script>

<script src="jquery.tmpl.js"></script>

<script type="text/x-jquery-tmpl" id="tmpl">

<div>1、普通变量两种写法，第二种=后面必须有空格：<br>${param1} {{= param1}}</div>

<div>2、html编码：<br>{{html param2}}</div>

<div>3、if else语句：<br>{{if param3>5}}周末{{else}}工作日{{/if}}</div>

<div>4、each语句操作数组：<br>{{each(i,o) param4}}第${i}个元素:${o.value}; {{/each}} </div>

</script>

<script type="text/javascript">

var params = {

	param1:'普通变量',

	param2:'<em>html</em>',

	param3:7,

	param4:[{value:100},{value:200},{value:300}]

};

var tmpl = $('#tmpl').tmpl(params);

$('#container').append(tmpl);

</script>

</html>

结果：

js模板的更多相关文章

  1. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  2. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  3. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  4. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  5. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  6. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  7. JS模板引擎 ：ArtTemplate （2）

    上一篇初略的介绍了一下javascript中的模板引擎,有兴趣的可以戳 这里 . 这一篇将带着大家一起做一个简易的模板引擎, 上一篇介绍到:模板引擎其实做的就是两件事. 根据一定的规则,解析我们所定义 ...

  8. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  9. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  10. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

随机推荐

  1. 全新重装win8.1系统后 配置开发及办公环境步骤

    全新重装win8.1系统后 配置开发及办公环境步骤 这两天,系统因配置开发环境出错,重装了一下,为日后方便,故此记录系统配置流程,防日后重装系统计划不周. 安装前,对照步骤,准备好下列安装文件. 0. ...

  2. Linq专题之查询操作

    前面我们主要讲解的是Linq的查询表达式,Linq不但提供了一些基本的查询表达式,还提供了数十个查询操作.比如筛选操作.聚合操作.投影操作等等.通过这些查询操作可以更方便的对数据源进行处理. Linq ...

  3. 使用VS GDB扩充套件在VS上远端侦错Linux上的C/C++程序

    在 Linux 上开发 C/C++ 程序,或许你会直接(本机或远端)登入 Linux,打开编辑器写完代码后,就用 gcc/g++ 来编译,遇到要除错(debug)的时候,则会选择使用 gdb 来进行除 ...

  4. 重新想象 Windows 8 Store Apps (61) - 通信: http, oauth

    [源码下载] 重新想象 Windows 8 Store Apps (61) - 通信: http, oauth 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 通信 ...

  5. 与众不同 windows phone (48) - 8.0 其它: C# 调用 C++

    [源码下载] 与众不同 windows phone (48) - 8.0 其它: C# 调用 C++ 作者:webabcd 介绍与众不同 windows phone 8.0 之 其它 C# 中调用 W ...

  6. PHP学习笔记：APACHE配置虚拟目录、一个站点使用多域名配置方式

    我用的是xmapp lite2016的集成包,配置虚拟目录教程如下: 找到httpd-vhosts.conf这个文件,这个文件一般是在xampp\apache\conf\extra这个路径下面,找不到 ...

  7. 关联规则-R语言实现

    关联规则code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && ...

  8. svn的管理与维护要点—纯手工编写

    由于在公司要维护阿里云的linux服务器,我们的svn服务器就安在阿里云上面.所以经常会涉及到svn的维护操作.离职的时候编写交接文档,刚好有充足的时间写一篇说明介绍,此说明纯原创,不是从网上复制,手 ...

  9. GetReadyForWin10Develop

    GetReadyForWin10Develop 序言 今年4月29日晚的微软的Build大会上,微软在现场为我们演示了Android和IOS应用移植到windows平台,加上原本可以开发win8应用的 ...

  10. SharePoint 服务器端对象模型 之 使用LINQ进行数据访问操作（Part 2）

    (四)使用LINQ进行列表查询 在生成实体类之后,就可以利用LINQ的强大查询能力进行SharePoint列表数据的查询了.在传统SharePoint对象模型编程中,需要首先获取网站对象,再进行其他操 ...