前端模板handlebars.js

来源：互联网发布：js原型和原型链是什么编辑：程序博客网时间：2024/06/06 14:23

最近在维护一些jsp页面的前端部分，之前的老项目很多都是后端写前端的，时间比较长也没有vue和react这种，不过最近要开始改版了（兴奋），里面有一个模板填充数据的库叫handlebars.js，只要简单两步就可以将数据放到模板里面，生成字符串，然后就可以很容易的append到body里面了,在没有mv*框架的情况下还是挺好用的，下面只是简单的功能，可以稍微感受下，详细功能见handlerbar官网

<!DOCTYPE html><html><head>    <title>handlebar</title></head><body></body><script id="entry-template" type="text/x-handlebars-template">  <div class="entry">    <h1>{{title}}</h1>    <div class="body">      {{body}}    </div>  </div></script><script src="handlebars-v4.0.5.js"></script><script>var source   = document.getElementById("entry-template").innerHTML;var template = Handlebars.compile(source);//template已经保存了html模板，往里面添加参数var context = {title: "My New Post", body: "This is my first post!"};var html    = template(context);//生成的是string，转换domvar domdiv = document.createElement("div");domdiv.innerHTML = html;document.getElementsByTagName("body")[0].appendChild(domdiv);</script></html>

0 0