Handlebars.js 模板库

最新推荐文章于 2025-10-22 14:15:21 发布

原创最新推荐文章于 2025-10-22 14:15:21 发布 · 587 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Handlebars

移动端项目整合专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Handlebars，一种用于Web开发的JavaScript语义模板库。通过分离view和data，Handlebars帮助开发者快速构建动态网页。文章包含了一个示例，演示了如何从HTML中获取模板，编译模板，填充数据上下文并渲染到页面。

Handlebars 介绍

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。

http://handlebarsjs.com/installation.html （官方文档）
http://keenwon.com/992.html （使用手册）

//例子
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="warp"><!-- 编译后的内容 --></div>
    <script src="./handlebars-v4.0.12.js"></script>
    <!--引入handlebars模板：type="text/x-handlebars-template"-->
    <script id="entry-template" type="text/x-handlebars-template">
        <div class="entry">
            <h1>{{title}}</h1>
            <div class="body">{{body}}</div>
        </div>
    </script>
    <script>
        //第一步 获取模板
        var entry = document.querySelector('#entry-template').innerHTML;
        //第二步 编译模板
        var template = Handlebars.compile(entry);
        //第三步 传入数据上下文（context）
        var context = {title: "My New Post", body: "This is my first post!"};
        var html = template(context);
        //第四步 渲染
        var warp = document.querySelector('#warp').innerHTML = html;
    </script>
</body>
</html>