Template Engine-06-模板引擎 Handlebars 入门介绍

news2024/11/28 16:51:36

拓展阅读

java 表达式引擎

logstash 日志加工处理-08-表达式执行引擎 AviatorScript+MVEL+OGNL+SpEL+JEXL+JUEL+Janino

QLExpress 阿里表达式引擎系统学习

什么是 Handlebars?

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

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

模板

{% raw %}
<p>{{firstname}} {{lastname}}</p>
{% endraw %}

Handlebars 表达式是 {% raw %}{{,一些内容,后跟一个 }}{% endraw %}。

当执行模板时,这些表达式将被输入对象中的值替换。

了解更多:表达式

安装

测试 Handlebars 的最快方法是从 CDN 加载它并嵌入到 HTML 文件中。

{% raw %}
<!--CDN 包含 Handlebars -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // 编译模板
  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
  // 执行已编译的模板并将输出打印到控制台
  console.log(template({ doesWhat: "rocks!" }));
</script>
{% endraw %}

警告

这种方法适用于小型页面和测试。当面向真实的生产系统时,有几种其他使用 Handlebars 的方法。

了解更多:安装

语言特性

简单表达式

如前所示,以下模板定义了两个 Handlebars 表达式

模板

{% raw %}<p>{{firstname}} {{lastname}}</p>{% endraw %}

如果应用于输入对象

输入

{
  firstname: "Yehuda",
  lastname: "Katz",
}

则表达式将被相应属性替换。结果如下

输出

{% raw %}<p>Yehuda Katz</p>{% endraw %}

嵌套输入对象

有时,输入对象包含其他对象或数组。例如:

输入

{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

在这种情况下,您可以使用点符号来访问嵌套属性

模板

{% raw %}{{person.firstname}} {{person.lastname}}{% endraw %}

了解更多:表达式

一些内置助手允许您将当前上下文更改为嵌套对象。然后,您可以像访问根对象一样访问此对象

评估上下文

内置的块助手 each 和 with 允许您更改当前评估上下文。

with 助手深入到对象属性中,使您可以访问其属性

模板

{% raw %}
{{#with person}}
{{firstname}} {{lastname}}
{{/with}}
{% endraw %}

输入

{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

each 助手遍历数组,允许您通过简单的 Handlebars 表达式访问每个对象的属性。

模板

{% raw %}
<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>
{% endraw %}

输入

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}

了解更多:内置助手

模板注释

您可以在 Handlebars 代码中使用注释,就像在代码中一样。由于通常存在一定程度的逻辑,这是一种良好的实践。

注释不会出现在生成的输出中。如果希望注释显示出来,只需使用 HTML 注释,它们

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1392614.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C Primer Plus 第6版 编程练习 chapter 15

文章目录 1. 第1题1.1 题目描述1.2 编程源码1.3 结果显示 2. 第2题2.1 题目描述2.2 编程源码2.3 结果显示 3. 第3题3.1 题目描述3.2 编程源码3.3 结果显示 4. 第4题4.1 题目描述4.2 编程源码4.3 结果显示 5. 第5题5.1 题目描述5.2 编程源码5.3 结果显示 6. 第6题6.1 题目描述6.…

使用easyexcel 导出多级表头demo

先看效果&#xff1a; 1、引入maven依赖 <!--EasyExcel --> <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.2.1</version> </dependency> 2、实体类 package com.…

c语言 编译与链接

编译与链接 翻译环境和执行环境翻译环境1.1预编译1.2编译1.3汇编&#xff08;ASM&#xff09;2.链接 执行环境最后给大家附上一张关于本节知识内容的图供大家更好理解~ ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/522d488885ba44d99aa504d6b21c88d5.png) &…

yolov8+deepsort的代码实现

按照官方描述&#xff0c;YOLOv8 是一个 SOTA 模型&#xff0c;它建立在以前 YOLO 版本的成功基础上&#xff0c;并引入了新的功能和改进&#xff0c;以进一步提升性能和灵活性。具体创新包括一个新的骨干网络、一个新的 Ancher-Free 检测头和一个新的损失函数&#xff0c;可以…

Python新手常见问题——列表中删不掉的0

1.测试代码 运行代码 nums1 [1,2,3,0,0,0] print(type(nums1))for i in nums1:if i 0:nums1.remove(i) print(nums1)效果如下 2.疑问&#xff1a; 上面代码&#xff0c;为什么把nums1里面的0移除不干净 3.原因&#xff1a; 在 Python 中&#xff0c;不建议在循环中直接…

蒙特卡洛概率抽样简介

蒙特卡罗方法是一类对概率分布进行随机抽样的技术。 在许多问题领域中&#xff0c;描述或估计概率分布相对简单&#xff0c;但计算所需的数量却很棘手。这可能是由于多种原因造成的&#xff0c;例如domain的随机性质或随机变量的指数级数量增长。 相反&#xff0c;可以通过使…

学校智慧能源消耗管理系统,破解学校节能降耗难题

随着碳达峰、碳中和工作的主要任务&#xff0c;学校作为能源集中地&#xff0c;且能源情况较为复杂的建筑&#xff0c;有效降低能源消耗、减少能源使用成本&#xff0c;已经成为学校一项紧迫的任务。 学校能耗痛点有哪些&#xff1f; 1、规模大 学校是集教学、科研、生活于一…

zabbix客户端配置及自定义监控

部署zabbix客户机 1.服务端和客户端都配置时间同步 yum install -y ntpdate ntpdate -u ntp.aliyun.com 2.服务端和客户端都设置 hosts 解析 cat > /etc/hosts << EOF 172.16.23.16 localhost 172.16.23.17 zbx-server EOF 3.被监控端 //设置 zabbix 的下载源&…

leedcode刷题笔记day1

题目大意&#xff1a; 暴力解法 两个for循环&#xff08;也是我一看到题目想到的方法&#xff09; 枚举在数组中所有的不同的两个下标的组合逐个检查它们所对应的数的和是否等于 target 复杂度分析 时间复杂度:O(n2)&#xff0c;这里 n 为数组的长度 空间复杂度:O(1)&#x…

精彩推荐 | 【深入浅出Docker原理及实战】「原理实战体系」零基础+全方位带你学习探索Docker容器开发实战指南(实战技术总结)

Dockerfile实战总结 前提介绍实战总结方案创建容器时传入环境变量调整宿主机和容器的时间差异解决办法 指定容器的rootfs的大小快速管理容器和镜像快速删除容器的原理--format格式化输出输出所有容器的name输出所有容器名包含test的容器查看退出状态的容器删除所有容器删除/启动…

transbigdata笔记:其他方法

1 出租车相关 1.1 taxigps_to_od 提取出租车OD信息 transbigdata.taxigps_to_od(data, col[VehicleNum, Stime, Lng, Lat, OpenStatus]) 输入出租车GPS数据&#xff0c;提取OD信息 data出租车GPS数据col[VehicleNum, Time, Lng, Lat, OpenStatus]五列 比如GPS数据长这样&am…

docker screen 常用基础命令

1.docker基础命令 1.1开启docker systemctl start docker #开启docker service docker restart #重启docker systemctl stop docker #关闭docker 1.2查看命令 docker images #查看docker镜像docker ps #查看正在运行的镜像或者容器docker ps -a #查看所有容器1.3运…

信驰达科技参与《汽车玻璃集成UWB数字钥匙发展研究白皮书》编制工作

为进一步探索汽车数字钥匙技术路线及开发思路&#xff0c;中国智能网联汽车产业创新联盟&#xff08;CAICV&#xff09;、福耀玻璃工业集团股份有限公司联合发起了《汽车玻璃集成UWB数字钥匙发展研究白皮书》研究工作。 2023年12月20日&#xff0c;由中国智能网联汽车产业创新…

Linux:/proc/kmsg 与 /proc/sys/kernel/printk_xxx

目录 前言一、/proc/kmsg1、简介2、如何修改内核日志缓冲区3、dmesgklogctl 函数&#xff08;来源于 man 手册&#xff09; 4、扩展阅读 二、 /proc/sys/kernel/printk_xxx三、/dev/kmsg 前言 本篇文章将为大家介绍与 Linux 内核日志相关的一些控制文件&#xff0c;共同学习&am…

C语言总结十二:文件操作详细总结

在操作系统中&#xff0c;为了统一对各种硬件的操作&#xff0c;简化接口&#xff0c;不同的硬件设备也都被看成一个文件。对这些文件的操作&#xff0c;等同于对磁盘上普通文件的操作。我们不去探讨硬件设备是如何被映射成文件的&#xff0c;把任意 I/O 设备&#xff0c;转换成…

ResNet论文翻译和精读

1:论文原文 论文原文&#xff1a; ResNet 2&#xff1a;该论文解决了什么问题&#xff1f; 改论文解决了深层的神经网络训练时的梯度消失和梯度爆炸的问题&#xff1b; 3&#xff1a;该论文的创新点&#xff1f; 将快捷连接应用到了网络中构建成了残差网络块&#xff1b;…

【嘉立创EDA-PCB设计指南】3.网络表概念解读+板框绘制

前言&#xff1a;本文对网络表概念解读板框绘制&#xff08;确定PCB板子轮廓&#xff09; 网络表概念解读 在本专栏的上一篇文章【嘉立创EDA-PCB设计指南】2&#xff0c;将设计的原理图转为了PCB&#xff0c;在PCB界面下出现了所有的封装&#xff0c;以及所有的飞线属性&…

代码随想录算法训练营29期|day 22 任务以及具体安排

235. 二叉搜索树的最近公共祖先 class Solution {public TreeNode lowestCommonAncestor(TreeNode root, TreeNode p, TreeNode q) {if(root null) return null;//向左遍历if(root.val > p.val && root.val > q.val){TreeNode left lowestCommonAncestor(roo…

Redis和MySQL如何保持数据一致性

前言 在高并发的场景下&#xff0c;大量的请求直接访问Mysql很容易造成性能问题。所以&#xff0c;我们都会用Redis来做数据的缓存&#xff0c;削减对数据库的请求。但是&#xff0c;Mysql和Redis是两种不同的数据库&#xff0c;如何保证不同数据库之间数据的一致性就非常关键…

基于springboot+vue的在线拍卖系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…