Handlebars入门案例及其最常用方法

最新推荐文章于 2024-04-24 11:29:16 发布
最新推荐文章于 2024-04-24 11:29:16 发布
阅读量6.3k 收藏
点赞数
分类专栏： Handlebars 文章标签： JQuery json dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgp3297299/article/details/13802843
版权

入门案例

handlebars 模版，只要你定义一个模版，提供一个json对象，handlebars 就能吧json对象放到你定的模版中，非常方便好用！

HTML代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>Handlebars demo</title>  
  6. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  7. <script type="text/javascript" src="js/handlebars-1.0.0.beta.6.js"></script>  
  8. <script type="text/javascript" src="js/mytest.js"></script>  
  9. <style type="text/css"></style>  
  10. </head>  
  11. <body>  
  12.     <h2>Simple handlebars demo</h2>  
  13.     <button id="btn_simple">Click me</button>  
  14.     <div id="my_div">  
  15.   
  16.     </div>  
  17.     <h2>Handlebars Helpers demo</h2>  
  18.     <button id="btn_helper">Click me</button>  
  19.     <div id="helper_div">  
  20.   
  21.     </div>  
  22.     <script id="some-template" type="text/x-handlebars-template">  
  23.           <table>  
  24.             <thead>  
  25.               <th>Username</th>  
  26.               <th>Real Name</th>  
  27.               <th>Email</th>  
  28.             </thead>  
  29.             <tbody>  
  30.               {{#if users}}  
  31.                 <tr>  
  32.                   <td>{{username}}</td>  
  33.                   <td>{{firstName}} {{lastName}}</td>  
  34.                   <td>{{email}}</td>  
  35.                 </tr>  
  36.               {{else}}  
  37.                 <tr>  
  38.                   <td colspan="3">NO users!</td>  
  39.                 </tr>  
  40.               {{/if}}  
  41.             </tbody>  
  42.           </table>  
  43.     </script>  
  44.     <script id="helper-template" type="text/x-handlebars-template">  
  45.         <div>  
  46.           <h1>By {{fullName author}}</h1>  
  47.           <div>{{body}}</div>  
  48.   
  49.           <h1>Comments</h1>  
  50.   
  51.           {{#each comments}}  
  52.           <h2>By {{fullName author}}</h2>  
  53.           <div>{{body}}</h2>  
  54.           {{/each}}  
  55.         </div>  
  56.     </script>  
  57. </body>  
  58. </html>  
mytest.js

  1. $(document).ready(function(){  
  2.     Handlebars.registerHelper('fullName', function(person) {  
  3.       return person.firstName + " " + person.lastName;  
  4.     });  
  5.   $("#btn_simple").click(function(){  
  6.     // $(this).hide();  
  7.     showTemplate();  
  8.   });  
  9.    $("#btn_helper").click(function(){  
  10.   
  11.     showHowUseHelper();  
  12.   });  
  13. });  
  14. // var context = {title: "My New Post", body: "This is my first post!"};  
  15. var persion = {title :"My New Post",body:"This is my first post!"}  
  16. function showTemplate(){  
  17.     var source   = $("#some-template").html();  
  18.     var template = Handlebars.compile(source);  
  19.       var data = { users: [  
  20.           {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },  
  21.           {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },  
  22.           {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }  
  23.         ]};  
  24.       $("#my_div").html(template(data));;  
  25. }  
  26.   
  27. function showHowUseHelper(){  
  28.     var context = {  
  29.       author: {firstName: "Alan", lastName: "Johnson"},  
  30.       body: "I Love Handlebars",  
  31.       comments: [{  
  32.         author: {firstName: "Yehuda", lastName: "Katz"},  
  33.         body: "Me too!"  
  34.       }]  
  35.     };  
  36.     var source   = $("#helper-template").html();  
  37.     var template = Handlebars.compile(source);  
  38.     $("#helper_div").html(template(context));;  
  39.       
  40. }  
常用方法

1）、最简单的Handlebars模版使用。

首先创建handlebarExample.html。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>handlebarExample.html</title>
</head>
<body>
</body>
</html>

添加js库：

<head>
 <title>handlebarExample.html</title>
 <script type="text/javascript" src="javascripts/jquery/jquery-1.7.1.min.js"></script>
 <script type="text/javascript" src="javascripts/handlebars/handlebars-1.0.0.beta.6.js"></script>
</head>

添加handlebars模版：

<script id="entry-template" type="text/x-handlebars-template">
 <div class="entry">
 <h1>{{title}}</h1>
 <div class="body">
 {{body}}
 </div>
 </div>
</script>

添加读取js函数：

<script type="text/javascript">
 $(document).ready(function(){
 var source = $("#entry-template").html();
 var template = Handlebars.compile(source);
 var context = {title: "标题", body: "内容"}
 var html = template(context);
 $(".mainBody").html(html);
 });
</script>

执行结果如下：

<body>
<div>
 <h1>标题</h1>
 <div>
 内容
 </div>
</div>
</body>

上面是一个最简单的Handlebars模版应用，其中template(context)是生成相应的html节点，并且添加到页面上。其中context可以添加相应的标签。

2)Block expressions使用方法

可以自定义模版标签，利用helper生成相应的html代码：

首先修改模版：

<script id="entry-template" type="text/x-handlebars-template">
 {{#list people}}{{firstName}} {{lastName}}{{/list}}
</script>

修改context和渲染成html

<script type="text/javascript">
 $(document).ready(function(){
 var source = $("#entry-template").html();
 var template = Handlebars.compile(source);
 var context =
 {
 people: [
 {firstName: "Yehuda", lastName: "Katz"},
 {firstName: "Carl", lastName: "Lerche"},
 {firstName: "Alan", lastName: "Johnson"}
 ]
 }
 Handlebars.registerHelper('list', function(items, options) {
 var out = "<ul>";
 for(var i=0, l=items.length; i<l; i++) {
 out = out + "<li>" + options.fn(items[i]) + "</li>";
 }
 return out + "</ul>";
 });
 var html = template(context);
 $(".mainBody").html(html);
 });
</script>

生成的代码效果如下：

  • Yehuda Katz
  • Carl Lerche
  • Alan Johnson

添加一个名叫list的helper，funcitons(items, options)传入两个参数, data中的people作为第一个参数传入，options作为第二个参数传入，options附带属性fn，使用fn可以调用该模块的内容。

 

3）、With Expressions 使用方法

直接添加模版并且生成节点，添加到页面。

var source = "<p>{{lastName}}, {{firstName}}</p>";
 var template = Handlebars.compile(source);
 var html =template({firstName: "Alan", lastName: "Johnson"});

添加模版：

<script id="entry-template" type="text/x-handlebars-template">
 <div class="entry">
 <h1>{{title}}</h1>
 {{#with author}}
 <h2>By {{firstName}} {{lastName}}</h2>
 {{/with}}
 </div>
</script>

添加模版数据内容：

<script type="text/javascript">
 $(document).ready(function(){
 var source = $("#entry-template").html();
 var template = Handlebars.compile(source);
 var context =
 {
 title: "My first post!",
 author: {
 firstName: "Charles",
 lastName: "Jolley"
 }
 }
 var html = template(context);
 $(".mainBody").html(html);
 });
</script>

其中使用with标签可以访问数据结构中的author对象中的相应元素。在实际的编程中，这一点非常有用，因为数据的不同对象需要展示到相同的页面上。所以with标签非常有用。

4）、Each helpers 用法

可以利用each标签，循环数据。

添加模版：

<script id="entry-template" type="text/x-handlebars-template">
 <ul class="people_list">
 {{#each people}}
 <li>{{this}}</li>
 {{/each}}
 </ul>
</script>

实现数据添加和展示：

<script type="text/javascript">
 $(document).ready(function(){
 var source = $("#entry-template").html();
 var template = Handlebars.compile(source);
 var context =
 {
 people: [
 "Yehuda Katz",
 "Alan Johnson",
 "Charles Jolley"
 ]
 }
 var html = template(context);
 $(".mainBody").html(html);
 });
</script>

显示的结果：

  • Yehuda Katz
  • Alan Johnson
  • Charles Jolley

5）、if helpers 用法

使用if模块，可以实现想用的逻辑。

模版：

<div class="entry">
 {{#if author}}
 <h1>{{firstName}} {{lastName}}</h1>
 {{else}}
 <h1>Unknown Author</h1>
 {{/if}}
 </div>

添加数据：

<script type="text/javascript">
 $(document).ready(function(){
 var source = $("#entry-template").html();
 var template = Handlebars.compile(source);
 var context ={}
 var html = template(context);
 $(".mainBody").html(html);
 });
</script>

由于数据为空，直接显示Unknown Author。

6）、Handlebars Paths

Handlebars数据也支持相应的路径。

模版：

<div class="entry">
  <h1>{{title}}</h1>
  <h2>By {{author.name}}</h2>

  <div class="body">
    {{body}}
  </div>
</div>

相应的数据：

<script type="text/javascript">
 $(document).ready(function(){
 var source = $("#entry-template").html();
 var template = Handlebars.compile(source);
 var context = {
 title: "My First Blog Post!",
 author: {
 id: 47,
 name: "Yehuda Katz"
 },
 body: "My first post. Wheeeee!"
 };
 var html = template(context);
 $(".mainBody").html(html);
 });
</script>

其中<h2>By {{author.name}}</h2>可以显示author对象中的name。

7）、使用Helpers

用户自定义helpers。

模版：

<script id="entry-template" type="text/x-handlebars-template">
 <div class="post">
 <h1>By {{fullName author}}</h1>
 <div class="body">{{body}}</div>
 <h1>Comments</h1>
 {{#each comments}}
 <h2>By {{fullName author}}</h2>
 <div class="body">{{body}}</div>
 {{/each}}
 </div>
</script>

数据：

<script type="text/javascript">
 $(document).ready(function(){
 var source = $("#entry-template").html();
 var template = Handlebars.compile(source);
 var context = {
 author: {firstName: "Alan", lastName: "Johnson"},
 body: "I Love Handlebars",
 comments: [{
 author: {firstName: "Yehuda", lastName: "Katz"},
 body: "Me too!"
 }]
 };
 Handlebars.registerHelper('fullName', function(person) {
 return person.firstName + " " + person.lastName;
 });
 var html = template(context);
 $(".mainBody").html(html);
 });
</script>

其中利用help实现了fullName标签。

 

zgp3297299
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端数据模板handlebars与jquery整合
panda-star的博客
07-31 4323
一、简介 handlebars是前端数据模板，在此介绍handlebars主要指令，以及与jquery整合的开发流程。 二、handlebars主要指令 handlebars中的指令与数据变量，都以两个大括号（即{{和}}）包围，指令以#开始，以/结尾。 1、循环指令#each 可遍历对象和数组，遍历中或获取的数据有： a)@index  ,遍历过程当前元素的索引; b)@key
前端模板引擎
祥哥的说
07-06 3765
一. 为什么要使用模板引擎关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照我老师的一句话表达:不用重复制造轮子. 对于为什么要使用模板引擎的解释,我看过最好的回答来自知乎上niko的回答:模板最本质的作用是【变静为动】一切利用这方面的都是优势，不利于的都是劣势。要很好地实现【变静为动】的目的，有...
模板语言-Handlebars
weixin_48813932的博客
09-11 672
Handlebars 是什么 Handlebars 是一种简单的模板语言。 它使用模板与传入的对象来生成HTML 或者其他文本格式。 Handlebars 模板看起来像是嵌入了handlebars 表达式的普通文本。
109、Rust模板引擎：熟练使用Handlebars、Tera等模板引擎进行页面渲染
最新发布
silenceallat的博客
04-24 849
今天我将向大家介绍Rust模板引擎，主要聚焦于Handlebars和Tera这两种模板引擎。我们将探讨它们的基本概念、应用场景以及一些实用的技巧和案例。
handlebars-v4.0.12.js下载
02-27
Handlebars.js是一个非常流行的功能强大的模板引擎，简单易用，具备较好的学习社区。利用Handlebars您可以方便的把html从javascript代码中分离出来，从而书写更清晰的代码
浅析Handlebars.js的使用流程
水泊梁山
08-26 1993
Handlebars.js是Jquery插件，所以第一步当然要引用Jquery啦，然后引用Handlebars.js即可。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/handlebars-1.0.0.beta.6.js"></script>
详解handlebars+require基本使用方法
12-29
最近在某网站看到了handlebars.js，出于好奇就百度了下这是神马玩意，结果让我很是欢喜，于是就开始自学下，handlebars就几个方法，蛮简单，言归正传！ 以下是基本教学逻辑演示，会附完整代码 测试案例就分为3大块，...
handlebars入门教程
10-21
"Handlebars 入门教程" Handlebars 是一个流行的模板引擎，用于将数据渲染到 HTML 模板中。它提供了一个简单易用的语法，允许开发者轻松地将数据绑定到模板中。本教程将引导您了解 Handlebars 的基本概念和语法，从...
vite-plugin-handlebars:Vite对车把的支持
03-19
vite-plugin-handlebars Vite对车把的支持为什么？我非常喜欢Vite，它是一个简单的静态站点捆绑程序。它可以处理捆绑多个HTML文件的操作，这虽然很棒，但是却缺乏现成的共享这些HTML文件部分的能力。虽然可以使用像...
handlebars-ajax:使用把手和AJAX渲染页面的入门仓库
05-17
1. **Handlebars 模板语法**：Handlebars 提供了一种简洁的语法，包括双大括号 `{{ }}` 用于输出数据，三大括号 `{{{ }}}` 用于输出未转义的数据，以及助手方法的定义和调用。例如，`{{#each items}}` 可以遍历数组...
JavaScript页面模版引擎handlebars.js学习及使用
奋斗的蜗牛
09-30 7133
Handlebars.js是一个Javascript客户端的模板引擎（它也能用于服务器端）。它是一个Javascript库，就像你在页面中包含其他.js文件一样。有了它，在你的HTML页面内添加模板，模板会被你通过Handlebars.js函数传递的数据中的值解析或者插值。 它是怎样运行的：Handlebars.js是一个由Javascript构建的编译器，它接收任意HTML与Handleb
handlebars-1.0.0.beta.6.js
08-08
handlebars-1.0.0.beta.6.js 亲测可用
handlebars.js 入门(1)
日向向阳1992的博客
02-26 1540
handlebars.js是javascript的一个语义模板库，它通过将data 与 view分离 来快速构建web模板，加载时预编译，一定程度上提高了代码的复用性和可维护性，提高敲代码的效率，总之，是一个轻量级的js 库，功能与现在流行的react 等相比，功能较为单一，但是，对于小型的数据而言，是一个不错的选择。       ① 需要引入handlebars.js库       ② 通过
Handlebars.js 模板引擎
weixin_30651273的博客
05-10 139
介绍Handlebars是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。使用与安装Handl...
js模板引擎 之handlebars.js
weixin_30668887的博客
11-07 113
最近在接触郑州知识库，里面使用到的技术是值得自己学习的。 该项目前端使用的是handlebars.js模板引擎框架。模板引擎框架用于数据与结构分离的思想，实现页面动态分离的效果。 1、为什么使用模板引擎框架？ 之前习惯于使用el表达式，使用el表达式会在后台服务器处理业务逻辑生成html代码然后再发送到前台，这样会耗费服务器资源。 也可在使用ajax，返回的json数据拼接htm...
Handlebars总结
y40152671的博客
08-16 955
概念 Handlebars 是一种简单的 模板语言。 它使用模板和输入对象来生成 HTML 或其他文本格式。Handlebars 模板看起来像常规的文本，但是它带有嵌入式的 Handlebars 表达式 。 <p>{{firstname}} {{lastname}}</p> 安装 使用 npm 或 yarn npm install handlebars # 或者 yarn add handlebars 通过 require 来使用 Handl
Handlebars的使用方法文档整理(Handlebars.js)
热门推荐
一条宝鱼的专栏
08-28 1万+
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; Handlebars.js和Mustache 的 区别 目前版本为 2.0.0 , 无压缩的情况下目测是 3000 行源代码,约 200kb ; 下面这个是基本的模版表达式, 其中  {{  和  }}  之间为hand...
Handlebars.js 使用入门
Dragon.G
03-31 4035
使用Handlebars，你可以轻松创建语义化模板，Mustache模板和Handlebars是兼容的，所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能。1、开始Handlebars模板看起来和HTML一样，只是嵌入了 handlebars 表达式div class="entry"> <h1>{{title}}</h1> <div class="b
Handlebars 表达式
06-10
以下是 Handlebars 表达式的一些常用语法： 1. 变量 `{{variable}}` 可以在模板中插入变量的值，例如： ```html <p>Hello, {{name}}! ``` 这里的 `{{name}}` 将会被替换为实际的变量值。 2. 字符串 `{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值