Html模板
script标签只有写明type=text/javascript或者不写type属性时才会当成js代码来执行,其它情况下(通常type属性值设置为“text/template”)浏览器会直接将其当成普通节点加载,节点内的文本内容不会解析显示到页面上,可以当做模板供js使用。
_.template()函数
template()可以将模板标签编译为一个函数,该函数接收data参数,返回用于页面呈现的html字符串,再将该字符串通过append方法添加到对应的DOM上。对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。
_.template()可以解析3种模板标签:
模板标签 功能描述
<% %> 标签中包含的通常是JavaScript代码,在定义模板函数时被解析,在页面渲染(数据)时被执行
<%= %> 直接输出变量或函数的结果,标签中包含的通常是变量名、函数名或对象属性。它的功能是输出数据,而不是执行。
<%- %> 输出变量或函数的结果,能将结果中的特殊字符串转换为实体形式,以避免代码的攻击
实现原理
类似下面的模板:
<h1> <%=title %> </h1>
<% for(var i in content){ %>
<p>第<%=i%>段:<%=content[i]%></p> <%}%>
编译后会被转换成类似下面的函数并传入数据执行,获取最后的字符串:
function(data){ //Json格式的实参data的属性名转为模板中的局部变量名:data={title:'Underscore',content:['chapter1','chapter2']}
var title=data.title
,content=data.content;
var str = "<h1> "+title+" </h1>";
for(var i in content){
str += "<p>第"+i+"段:"+content[i]+"</p>";
}
return str; //返回拼接好的html字符串
}
template()函数的调用格式如下:
var string/funTpl=_.template(templateString, [data], [settings])
其中,templateString是模板字符串,含有模板标签的HTML代码段;可选参数data对象负责提供模板中变量的值。
若有data,返回最终的html字符串;若无data,返回一个模板函数,可重复使用。
data为Json对象格式,模板里的变量名为Json对象的属性名,以此传递参数。
可选参数settings为自定义模板标签的字符格式,比如可以将<% %>修改为{% %}格式。
// 一步到位生成结果字符串,每次使用时都要重新创建一次模板
_.template('模板字串', {数据对象});
// 分两步
var compiled = _.template('模板字串'); // 创建模板
compiled({数据对象1}); // 填充数据
compiled({数据对象2}); // 重复利用之前编译好的模板
使用步骤:
<script type="text/javascript">
var ele = $('#element')
, tpl =_.template($('#tpl').html()); //获取文档上script节点内的文本内容,生成模板函数
var data = {title:"Underscore" };
var html = tpl(data); //生成html字符串
ele.append(html); //挂载到DOM上
</script>
//使用requirejs模块化开发时,可用text插件,将模板单独作为一个html文件而不用作为script节点放在页面文件底部
define(['text!components/compare/template.html',otherModule],function(template,moduleName){
var tpl=_.template(template); //生成模版函数
...
})
循环语句与判断语句:
//循环语句
var list =
" <% _.each(people, function(name) { %> //不要嵌套模板标签,容易报错
+ <li><%= name %></li>
+ <% }); %>";
_.template(list, {people : ['moe', 'curly', 'larry']});
//判断语句:
var txt =
" <% var i = 0; if (i<1){ %>"
+ "<%= word %>"
+ "<% } %>";
_.template(txt, {word : "Hello"})
注意:
【<%=JSON.Stringify("大写的数据") %>---->会全转为小写,原因未查】
任何需要多步运算的逻辑,都应该剔除出模板。
模板里也可以调用外面的函数,只要在data里面传入该函数即可。
_.template(tmpl, { data: page.Data, trans: helper.trans }),传入trans方法,模板中可以直接使用trans。