HTML模板

admin管理员组

文章数量:1794759

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。 

本文标签： 模板html