前台模板underscore.js配合Ajax渲染页面数据
前几次介绍node的ejs后台模板进行数据渲染们今天简单介绍一下咱们前端的模板引擎underscore的数据渲染!
underscore.js文件cdn地址:https://cdn.bootcss.com/underscore.js/1.9.0/underscore.js
本次配合Ajax渲染页面数据,让前台页面的数据根据效果!(不再是以往的假数据,模仿数据库进行请求加载)
首先要进行需要渲染的数据(进行循环)进行模板化
<script type="text/template" id="tpl">
<div class="item" >
<p><span>标题: <%=title %> </span><span>作者:<%= auth %> </span> <span>日期:<%= date %></span></p>
<p>
<%= con %>
</p>
</div>
</script>进行渲染的模板要进行加id值
循环的数据进行封装模板后,需要得到模板内容以及模板组装
//得到模板
var tpl=$('#tpl').html();
//组装模板
var compiled = _.template(tpl);//tpl为刚才得到的封装模板Ajax请求数据以及完成模板的填充
$.get("/api",function (data,status) {
console.log(data);
//循环数据
for(var i=0;i<data.length;i++){
var mbString=compiled(data[i]);
$(".main").append(mbString)//将得到的模板追加到相应的区域(main内)
}由于ajax无法跨域,所以请求的地址使用相对路径,循环得到的ajax中data数据,进行模板填充!
之前的使用ejs模板填充,后台需要前台页面修改为ejs,用户访问页面审查元素中所有模板全部被后台解析相应内容,而前台模板的审查元素还是对应的,浏览时候请求ajax后填充模板!这样变得前后台更加清晰,前台只需负责页面,后台管理数据(提供数据接口),连接二者桥梁(Ajax),数据请求则完成简单的前后台交互,更加明显!互不干扰!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-7-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读