Handlerbars.js模板引擎的使用之初级篇

最新推荐文章于 2024-08-12 08:30:52 发布

LQ-刘强

最新推荐文章于 2024-08-12 08:30:52 发布

阅读量618

点赞数

分类专栏： web前端系列文章标签： Handlerbars的使用模板引擎Handlerbars的使用

本文链接：https://blog.csdn.net/qq_33429583/article/details/79679557

版权

web前端系列专栏收录该内容

26 篇文章 2 订阅

订阅专栏

继template-web.js后的又一个模板引擎Handlerbars.js的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="content"></div>

<script type="text/javascript" src="../conment/jquery-1.12.3.js"></script>
<script type="text/javascript" src="handlebars-v4.0.11.js"></script>

<script type="text/html" id="user-template">
    <div>姓名 {{name}}</div>
    <div>年龄 {{age}}</div>
    <div>信息 {{info}}</div>
</script>

<script type="text/javascript">

    //模拟的数据
    let user = {
        name:"liuqiang",
        age:23,
        info:"你四点就好似发动机是否抗静电"
    };

    //找到user-template的模板
    let $userTemplate = $("#user-template").html();
    //返回的是一个函数
    let fun = Handlebars.compile($userTemplate);
    //调用生成的fun函数 返回一个html文本
    let userHtml = fun(user);
    //填充到html中
    $("#content").html(userHtml);
</script>
</body>
</html>

下一篇是Handlerbars的中级篇（判断语句，循环语句.....）