handlebars学习日记

1570

前言

为什么学习handlebars呢？当然是因为下个项目要用这个东西咯，学就完事了，话不多说咱们开始吧！

介绍

Handlebars 是一种简单的 模板语言。

它使用模板和输入对象来生成 HTML 或其他文本格式。Handlebars 模板看起来像常规的文本，但是它带有嵌入式的 Handlebars 表达式 。

安装

测试 Handlebars 的最快方法是使用 CDN 加载它并将其嵌入 HTML 文件中

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
复制代码

语言特性

简单的表达式

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        <p>{{firstname}} {{lastname}}</p>
    </script>
    <script>
        const data = {
            firstname: "Yehuda",
            lastname: "Katz",
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        console.log(html, $("#demo"));
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

如上文所示，以下模板定义了两个 Handlebars 表达式,如果应用于输入对象,则表达式将被相应的属性替换。

嵌套输入对象

有时，输入对象包含其他对象或数组,在这种情况下，你可以使用点符号来访问嵌套属性

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        <p>{{person.lastname}} {{person.firstname}}</p>
    </script>
    <script>
        const data = {
            person: {
                firstname: "Yehuda",
                lastname: "Katz",
            },
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        console.log(html, $("#demo"));
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

计算上下文

内置的块助手代码 each 和 with 允许你更改当前代码块的值。

with 助手代码注入到对象的属性中，使你可以访问其属性

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        <p>
            {{#with person}}
                {{firstname}} {{lastname}}
            {{/with}}
        </p>
        <ul>
            {{#each people}}
              <li>{{this}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        const data = {
            person: {
                firstname: "Yehuda",
                lastname: "Katz",
            },
            people: [
                "Yehuda Katz",
                "Alan Johnson",
                "Charles Jolley",
            ],
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

模板注释

你可以像在其他语言的代码中一样在 Handlebars 代码中使用注释。由于 Handlebars 代码中通常存在一定程度的逻辑，因此这是一个好 习惯。

注释将不会出现在结果输出中。如果你想显示注释。只需使用 html 注释。它们将被输出。

任何包含 }} 或其他 Handlebars 标记的注释都应该使用 {{!–}} 语法。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        {{! This comment will not show up in the output}}
        <!-- This comment will show up as HTML-comment -->
        {{!-- This comment may contain mustaches like }} --}}
        <p>
            {{#with person}}
                {{firstname}} {{lastname}}
            {{/with}}
        </p>
        <ul>
            {{#each people}}
              <li>{{this}}</li>
            {{/each}}
        </ul>
    </script>
    <script>
        const data = {
            person: {
                firstname: "Yehuda",
                lastname: "Katz",
            },
            people: [
                "Yehuda Katz",
                "Alan Johnson",
                "Charles Jolley",
            ],
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

自定义助手

通过调用 Handlebars.registerHelper 方法，你可以从模板中的任何上下文中访问 Handlebars 助手代码。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        {{firstname}} {{loud lastname}}
    </script>
    <script>
        const data = {
            firstname: "Yehuda",
            lastname: "Katz",
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        Handlebars.registerHelper('loud', function (aString) {
            return aString.toUpperCase()
        })
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

块助手代码

代码块表达式使你可以自定义这样的助手代码：这个助手代码可以使用与当前上下文不同的上下文来调用模板。这些块助手代码在名称前 以 # 号标识，并且需要一个名称相同的结束模板 /。让我们考虑一个生成 HTML 列表的助手代码。

这个示例创建了一个名为 list 的助手代码来生成我们的 HTML 列表。助手代码接收一个 people 参数和一个 options 参数 。options 包含一个名为 fn 的属性，这个属性使你能够像调用普通的 Handlebars 模板一样调用代码块的上下文。

执行后，模板将渲染：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        {{#list people}}{{firstname}} {{lastname}}{{/list}}
    </script>
    <script>
        const data = {
            people: [
                {
                    firstname: "Yehuda",
                    lastname: "Katz",
                },
                {
                    firstname: "Carl",
                    lastname: "Lerche",
                },
                {
                    firstname: "Alan",
                    lastname: "Johnson",
                },
            ],
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        Handlebars.registerHelper("list", function (items, options) {
            const itemsAsHtml = items.map(item => "<li>" + options.fn(item) + "</li>");
            return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
        });
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

块助手代码具有其他功能，例如能够创建 else （例如，由内置的 if 函数使用）

因为调用 options.fn(context) 时 Handlebars 会转义块助手代码的内容，因此 Handlebars 不会转义块助手代码的返回结果。如果 这样做，代码块内部的内容将被两次转义。

HTML 转义

因为 Handlebars 最初是设计用来生成 HTML 的，所以它会转义由 {{expression}} 返回的值。如果你不想让 Handlebars 转义某个值 ，请使用“三重隐藏”（{{{）。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        raw: {{{specialChars}}}
        html-escaped: {{specialChars}}
    </script>
    <script>
        const data = { specialChars: "& < > \" ' ` =" }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

Handlebars 不会转义 Handlebars.SafeString。如果你正在编写一个自己的生成 HTML 的助手代码，你通常会想返回一个 new Handlebars.SafeString(result)。这种情况下，你将需要手动转义参数。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        {{bold text}}
    </script>
    <script>
        const data = { text: "Isn't this great?" }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        Handlebars.registerHelper("bold", function (text) {
            var result = "<b>" + Handlebars.escapeExpression(text) + "</b>";
            return new Handlebars.SafeString(result);
        });
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

这将转义传入的参数，但是 response 会被标记为 safe，因此即使未使用“三重隐藏”， Handlebars 也不会尝试转义它。

代码片段

Handlebars 代码片段通过创建共享模板允许代码复用。你可以使用 registerPartial 方法：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        {{#each persons}}
            {{>person person=.}}
        {{/each}}
    </script>
    <script>
        const data = {
            persons: [
                { name: "Nils", age: 20 },
                { name: "Teddy", age: 10 },
                { name: "Nelson", age: 40 },
            ],
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        Handlebars.registerPartial(
            "person",
            "{{person.name}} is {{person.age}} years old.\n"
        )

        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

表达式

基本用法

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        <p>{{firstname}} {{lastname}}</p>
    </script>
    <script>
        const data = {
            firstname: "Yehuda",
            lastname: "Katz",
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        console.log(html, $("#demo"));
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

路径表达式

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>Demo</title>

</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/template" id="template">
        <p>{{person.lastname}} {{person.firstname}}</p>
        <p>{{person/firstname}} {{person/lastname}}</p>
    </script>
    <script>
        const data = {
            person: {
                firstname: "Yehuda",
                lastname: "Katz",
            },
        }
        //通过模板定义的id获取模板
        const tpl = $("#template").html();
        //预编译模板
        const template = Handlebars.compile(tpl);
        //传入需要填充的数据匹配
        const html = template(data);
        console.log(html, $("#demo"));
        //插入模板到ul中
        $("#demo").html(html);
    </script>
</body>

</html>
复制代码

参考文档 www.handlebarsjs.cn/

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云