HTML模板

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。