作用

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

为什么这样使用

在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. Winform基础

    1.显示窗口的两种方式: 非模态(Modaless):Show 模态(Modal),阻塞主窗口:ShowDialog() 2.主窗口和对话框之间传递参数,在对话框中申明属性,主窗口给对话框传递值通过参 ...

  2. .net 读书笔记

    好书不能只读一遍,这两天又翻看了一遍<你必须知道的.NET>,重温了下基础,重温了下经典,简单记录了下来. 内存分配:CLR 管理内存的区域,主要有三块,分别为: 线程的堆栈,用于分配值类 ...

  3. Apns推送中的的json格式介绍

    在开发向苹果Apns推送消息服务功能,我们需要根据Apns接受的数据格式进行推送.下面接受我在进行apns推送时候总结的一点apns服务接受的Json数据格式 示例 1: 以下负载包含哦一个简单的 a ...

  4. 泛函编程（17）－泛函状态－State In Action

    对OOP编程人员来说,泛函状态State是一种全新的数据类型.我们在上节做了些介绍,在这节我们讨论一下State类型的应用:用一个具体的例子来示范如何使用State类型.以下是这个例子的具体描述: 模 ...

  5. Docker on CentOS for beginners

    Introduction The article will introduce Docker on CentOS. Key concepts Docker Docker is the world's ...

  6. ahjesus SSHkey登陆linux服务器，无需密码，ubuntu

    cd ~/.ssh/如果目录不存在就新建一个 mkdir ~/.ssh 制作公匙 ssh-keygen -t rsa默认会生成id_rsa.pub的公匙 将公匙推送到指定的服务器 scp id_rsa ...

  7. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  8. SQLSERVER数据库表各种同步技术

    1 --SQLSERVER数据库表各种同步技术 减少SQLServer中每次的同步数据量 2 3 --说到数据库,我就不由地想到同步数据,如何尽可能地减少每次的同步数据量,以此来提高同步效率,降低对网 ...

  9. 【使用 DOM】使用 Window 对象

    1. 获取 Window 对象 可以用两种方式获得Window对象.正规的HTML5方式是在Document对象上使用defaultView属性.另一种是使用所有浏览器都支持的全局变量window . ...

  10. Smartforms常见问题

    分类: 1.使用SFSY-FORMPAGES显示总页数的时候,如果页数大于9,将会在前10页显示成星号* 解决: 有时候这样做完之后,星号*是没有了,但是字体会有颠倒或者重叠的现象. 如果出了这个问题 ...