模板引擎

最近写的代码里面都涉及到了模板引擎，前端的和后台的，所以打算写一篇博客总结一下：

后台的模板引擎与前端的交互

前端代码：

<%for(var i = 0;i<result.length;i++){%>
   <div class="grid">
      <p class="title"><%=result[i].name%></p>
   </div>
<%}%>

这里的result需要后台来呈递

//nodejs
app.get("/allstudent",function(req,res){
  res.render("allstudent",{
    "result":result
  })  
})

这里的result的值可以是我们从数据库中查询值存放在一个数组或其他的值

当我们在后台获取到这个result的值已经完成了这个获取数值的服务，但是我们要将这些值可视化给用户，直接给用户返回一个json值，用户体验太差，所以我们要借用模板引擎

但是如果我们不用模板引擎呈递也可以直接输出json，前台用ajax
或者用Angular调用

Ajax呈递页面

前端代码：

这里我们要引用template.js前端模板引擎，简要快速的简绍一下：

默认的开始标签和结束标签：

sTag: '<%'
eTag: '%>'

这里如果你同时使用了前端的模板引擎后后台的模板引擎很有可能就会冲突，之前我就遇到过类似的问题，解决方法我记录了一下，希望能帮到遇到同一种问题的朋友前后端模板引擎冲突

快速上手：编写模板

使用一个type=”text/html”的script标签存放模板，或者放到字符串中：

<script id="tpl" type="text/html">
  <ul>
    <%for(var i = 0; i < list.length; i++) {%>
    <li><%:=list[i].name%></li>
    <%}%>
  </ul>
</script>

渲染模板：

var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

这里的第二个参数可以替换成ajax从后台获取到的数值

下面具体说一下前端代码：

<script type="text/template" id="temp">
  <div class="grid">
    <p class="title"><%=name%></p>
    <p class="xuehao"><%=xuehao%></p>
    <p class="sex"><%=sex%></p>
  </div>
</script>
//jQuery片段

//通过id获取模板
var templateString = $("#temple").html();

//ajax请求
$.get("/allstudent",function(result){
  for(var i = 0;i<result.length;i++){
    //组装模板
    var compiled = _.compiled(templateString{
       "name":result.result[i].name;
       "sex":result.result[i].sex;
       "xuehao":result.result[i].xuehao;
    })
    $(".containter").append($(compiled));
  }
})