前端模板handlebars.js

最新推荐文章于 2024-06-07 09:57:00 发布

机智的皮卡丘

最新推荐文章于 2024-06-07 09:57:00 发布

阅读量576

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js 前端

本文链接：https://blog.youkuaiyun.com/qq_20334295/article/details/65627624

js 专栏收录该内容

47 篇文章

订阅专栏

这篇博客介绍了在没有mv*框架的环境下，如何利用handlebars.js进行前端模板数据填充。通过简单两步，可以将数据绑定到模板并生成字符串，方便地追加到页面中。对于老项目的改版，handlebars.js提供了实用的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在维护一些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，转换dom
var domdiv = document.createElement("div");
domdiv.innerHTML = html;
document.getElementsByTagName("body")[0].appendChild(domdiv);
</script>
</html>