您的位置：首页 > 其它

渲染模板render_(内容管理系统总结2)

2016-05-17 10:44 274 查看

1、 render渲染

首先了解ejs是什么：EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。

我现在对它的了解就是知道如何去使用这个东西，真正高大上个的东西还是让度娘交给我们吧。

参考文档有：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>
<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"});
$("body").append($nameHtml);
</script>
</body>
</html>

分析我的基础使用：head中要引用ejs.js这个js文件

然后我们要使用它，我们通过script设置ID，type=”text/html” ,并且结合ejs的表达方式来协助<% %>中间写入逻辑语句，<%= %>直接写入等式的值，这样通过渲染的方式，将script对应的ID里边的内容给渲染出来，变成我们的html。看起来是简明易懂的。

将上面所说的script里边的代码转变成html语言，中间媒介就是ejs.首先我们要实例化一个ejs对象，我们就要new出来它。因为很多时候都要使用这个render方法，我们就不是每一次都New出来一个实例对象了，我们就直接把它定义成一个公用的方法。就是我们这段代码：

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

return isJQuery ? $(html) : html;
}

当然我们也可以每一次ejs都重新的实例化一次，例如：

var $nameHtml =new EJS({element:testName}).render({data:data,nameType:"nameul"});

当然ejs还有其他的使用方法，但这是我在项目使用最多最多的一种方法，所以拿来总结一下。其他的方法可以再看看上面我粘贴的那个链接，找到更多的方法。

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

标签：

相关文章推荐

新的分享

章节导航