js模板
作用
适合用于定义模板(模板容器),不解析(渲染/执行)。
为什么这样使用
在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模板的更多相关文章
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- 《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- 掌握js模板引擎
最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
- js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
- JS模板引擎 ：ArtTemplate （2）
上一篇初略的介绍了一下javascript中的模板引擎,有兴趣的可以戳 这里 . 这一篇将带着大家一起做一个简易的模板引擎, 上一篇介绍到:模板引擎其实做的就是两件事. 根据一定的规则,解析我们所定义 ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- Filter - Surge.js模板引擎过滤器
版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...
随机推荐
- Entity FrameWork 延迟加载本质（二）
1.对于外键实体而言,EF会在用到这个外键属性的时候,才会去查对应的表.这就是按需加载了... 2.按需加载的缺点:每次调用外键实体的时候,都会去查询数据库(EF有小优化:相同的外键实体只查一次) I ...
- SQL Server 2008 FILESTREAM特性管理文件
在SQL Server 2008中,新的FILESTREAM(文件流)特性和varbinary列配合,你可以在服务器的文件系统上存储真实的数据,但可以在数据库上下文内管理和访问,这个特性让SQL Se ...
- 甲骨文白桃花心木P6 EPPM 8.2项目点提供样本
甲骨文白桃花心木样例代码 除非明确确定,这里的示例代码不是认证或Oracle支持;它只是用于教育或测试的目的. 你必须接受 许可协议下载此示例代码. 接受 许可协议 | 下降 许可协议 的名字 ...
- 【C#】1.1 第1章学习要点
分类:C#.VS2015 创建日期:2016-06-14 教材:十二五国家级规划教材<C#程序设计及应用教程>(第3版) 一.配套源程序(VS2015版)的运行截图 VS2015版的配套源 ...
- 【jQuery基础学习】07 jQuery表单插件-Form
作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新. 它的核心方法是ajaxForm()和ajaxSubmit() 升级表 ...
- Studio for WPF:定制 C1WPFChart 标记
在本篇文章中,我们将阐述如何定制 C1WPFChart 数据点的标记. 下面分步讲解实现: 1.定制自定义样式: 1: <Window.Resources> 2: <Style x: ...
- idea中maven项目xml资源文件无法读取
解决方法:编辑pom.xml文件 添加如下标签 <build> <resources> <resource> <directory>src/main/j ...
- windows下redis启动报Creating Server TCP listening socket *:6379: bind: No such file or directory
解决方法: 按顺序输入如下命令就可以连接成功 # redis-cli.exe# > shutdown# > exit# redis-server.exe redis.windows.con ...
- JavaScript中的null与nudefined
null和undefined 概述 null与undefined都可以表示"没有",含义非常相似.将一个变量赋值为undefined或null,老实说,语法效果几乎没区别. var ...
- python模块基础之json，requeste，xml，configparser，logging，subprocess，shutil。
1.json模块 json 用于[字符串]和 [python基本数据类型] 间进行转换(可用于不同语言之前转换),json.loads,将字符串转成python的基本数据类型,json.dum ...