您的位置：首页 > 其它

渲染模板template_(内容管理系统总结3)

2016-05-17 13:42 471 查看

2 template模板渲染

因为前面的总结中看到了script type=”text/html” ，在总结这章的时候又看到了script type=”text/template”，所以我就顺便的研究了下这个type的意义。

必需的 type type：规定脚本的 MIME 类型。

MIME 类型：(Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据

所以我们通过这个type类型来分析用那个解析器来解析这段代码。

这个渲染模板是underscore里边的方法，所以我们要引用的是underscore.js这个js文件

首先看个能跑起来的代码把，其实也就是相对于上一章的render渲染改了一点：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.10.2.min.js"></script>
<script src="ejs.js"></script>
<script src="underscore.min.js"></script>

<style type="text/css">
.test{
display:table;
height:400px;
width:400px;
background:#99cc99;
border-radius:5px;
border:1px solid #f70;

}
.test > span{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.test > span > img{
height:200px;
width:200px;
border-radius:50%;
box-shadow:1px 1px 3px rgba(0,0,0,.5);
display: inline-block!important;
}
.hide{
display: none!important;
}
</style>
<script id="testName" type="text/html">
<div class="name">
<ul class="<%= nameType%>">
<% for(var i= 0;i<data.info.list.name.length;i++) { %>
<li class="list"><%= data.info.list.name[i] %></li>
<% } %>
</ul>
</div>
</script>
</head>
<body>
<div class="test">
<span><img class="hide" src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span>
<a href="www.baidu.com">点我喽！</a>
</div>

<script>
function render(id, data, isJQuery) {
var html = new EJS({
element: id
}).render(data);

return isJQuery ? $(html) : html;
}

$(".test").click(function(){
alert("test测试");
});
$(".test img").click(function(){
alert("img测试");

return false;
});
$(".test a").click(function(){
alert("哈哈，我就是来阻止你的~");

return false;
});

var data = {
info : {
list:{
name:["hello","nihao","xining"]
}
}
}

// var $nameHtml =render(testName,{data:data,nameType:"nameul"});
// var $nameHtml =new EJS({element:testName}).render({data:data,nameType:"nameul"});
var $nameHtml = _.template($("#testName").html())({data:data,nameType:"nameul"});
$("body").append($nameHtml);
</script>
</body>
</html>

这个代码很好理解，这里没有统一的定义template方法，因为template这个比较方便的，所以就没有写总体的方法了。

underscore.js还有很多的其他的方法，都可以使用的。推荐underscore.js的中文文档查看：

underscore.js中文文档查看

_.方法名:这其实就是标准的underscore.js的使用了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航