作用

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

为什么这样使用

在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. 在存储过程中调用WebService

    1 create procedure usp_CallWebServices 2 ( 3 @parameter nvarchar(500)=null 4 ) 5 as 6 Declare @obj i ...

  2. C#中的lock关键字有何作用

    作为C#的程序员来说,在遇到线程同步的需求时最常用的就是lock关键字.但如何正确并有效地使用lock,却是能否高效地达到同步要求的关键.正因为如此,程序员需要完全理解lock究竟为程序做了什么. 所 ...

  3. ActiveReports 9 新功能:借助目录(TOC)控件为报表添加目录功能

    在最新发布的ActiveReports 9报表控件中添加了多项新功能,以帮助你在更短的时间里创建外观绚丽.功能强大的报表系统,本文将重点介绍新增文档目录控件(TOC),通过拖拽操作便可添加报表目录. ...

  4. ex_KMP--Theme Section

    题目网址: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110060#problem/B Description It's time f ...

  5. bootstrap 学习片段

    1. 只要单击按钮添加了data-toggle="dropdown"属性, 在单击按钮的时候,默认隐藏的下拉列表就会显示出来 <div class="row&quo ...

  6. Webform(分页、组合查询)

    一.分页 1.写查询方法: public List<Student> Select(int PageCount, int PageNumber) {//PageCount为每页显示条数,P ...

  7. SharePoint 2013 Workflow 分布式配置问题记录

    SharePoint 2013 发布已经有一段时间,前段事件主要是做财务项目,用到Oracle和HFM,由于从来没了解过这两个软件,把大部分时间用在了学习Oracle和HFM的API,目前对HFM的A ...

  8. mongodb 基本指令学习

    启动 : 1)创建一个文件夹存放mongodb的数据  启动的时候指定这个文件夹为存储mongodb的存储路径  我的目录是D:\data 2)启动mongodb服务  进入安装mongodb的bin ...

  9. js事件小记

    参考javascript编程全解  javascript高级程序设计 javascript经典实例 对事件的处理方式称为事件处理程序或事件侦听器 ,对于一个元素或事件,只能设定1个事件处理程序,却可以 ...

  10. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q66-Q69)

    Question 66You have a custom theme named MyTheme. The theme is defined in a file named MyTheme.thmx. ...