Handlebars的使用

最新推荐文章于 2019-07-03 09:59:47 发布
最新推荐文章于 2019-07-03 09:59:47 发布
阅读量421 收藏
点赞数
分类专栏： 框架库点滴知识 文章标签： Handlebars javascript

web 开发中，js 解析JSON 是经常的事情。非常繁琐。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/myjs.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>  

 

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. } 
弹琴弹琴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
handlebarsjs
02-07
我将介绍比较流行的javascript模板引擎handlebars，如果你没有接触过的话，希望在阅读完我们的教程后，能对它有一个大体的了解，并且能够有机会应用到你的开发项目中去。由于时间和个人认知的深度关系，有可能有些不够准确的地方，如果你发现有任何不准确的地方，请留言
handlebars 详解及使用
蒲公英芽的博客
03-29 5590
1. 前言 handlebars的使用方法和art-template 模板引擎类似，同时支持 NodeJs和浏览器。使用模板引擎的好处就是便于对代码进行维护，同时，使用模板引擎操作DOM，效率也会更高一些。个人觉得还是art-template 比较好用一些，因为工作中使用了handlebars，查看它的官方文档时，使用方法介绍的也不详细，花时间整理了一些它的常用方法，希望会对你有帮助。 如果想了解...
Handlebars的使用方法文档整理(Handlebars.js)
热门推荐
一条宝鱼的专栏
08-28 1万+
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; Handlebars.js和Mustache 的 区别 目前版本为 2.0.0 , 无压缩的情况下目测是 3000 行源代码,约 200kb ; 下面这个是基本的模版表达式, 其中  {{  和  }}  之间为hand...
handlebars.js 入门(1)
日向向阳1992的博客
02-26 1531
handlebars.js是javascript的一个语义模板库，它通过将data 与 view分离 来快速构建web模板，加载时预编译，一定程度上提高了代码的复用性和可维护性，提高敲代码的效率，总之，是一个轻量级的js 库，功能与现在流行的react 等相比，功能较为单一，但是，对于小型的数据而言，是一个不错的选择。       ① 需要引入handlebars.js库       ② 通过
Handlebars模板引擎
ypfhzl的博客
02-14 440
如果你不知道什么是模板，或者没用过，那我们先认识下在不是模板的时候，用一种语言生成另一种语言的最直接方式的时候，怎么操作。 比如：使用Javascript生成一些HTML： document.write('Please Don't Do This'); document.write('document.writeis naughty,'); 如果像上面这样一直往下写，写500行，这样写一点
JavaScript页面模板库handlebars的简单用法
10-24
本文主要是给大家分享的一个javascript页面模板库Handlebars的简单用法，可以帮助大家轻松的构建语义化模板，非常的实用，推荐给大家。
详解handlebars+require基本使用方法
08-31
本文主要对handlebars+require基本使用方法进行详细介绍，文章尾部会附上完整代码供大家参考。需要的朋友一起来看下吧
handlebars入门教程
10-21
handlebars入门教程
handlebars
01-09
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
web前端JS整理之Handlebars介绍
xiaohai798的专栏
10-11 2729
web前端JS整理 Handlebars Jquery
Handlebars.js 中文文档
Huazie
10-04 4137
转载自 http://keenwon.com/992.html 使用 Handlebars，你可以轻松创建语义化模板，Mustache 模板和 Handlebars 是兼容的，所以你可以将 Mustache 导入Handlebars以使用 Handlebars 强大的功能。
Handlebars的简单使用
Jsoning的博客
11-20 843
简介  Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用”Logic-less template”（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。安装  Handl
handlebars.js报错
小耳朵晨晨
07-03 514
错误打印： Error: You must pass a string or Handlebars AST to Handlebars.compile 出现这个错误我是因为var tpl =$("guestList").html那里没有写（）， 在网上复制后没注意。 正确的： <!DOCTYPE html> <html> <head> &l...
10分钟快速学Handlebars
whqet
01-29 7707
据说handlebars是一个流行的模板引擎，可以把html从javascript中分离出来，写更清晰的代码。来不妨一试。
Handlebars.js学习一些官方文档没有提到的细节点，有完整示例
tangcc的博客
04-28 1145
官网：http://handlebarsjs.com/   我是使用vue.js 的，因为mvvm 真的可以逛甩这种语义化模板几十条街，但是接手的一个项目用到了这个东西，不得已学习了。由于其官方文档不太详细，下我来总结一下我的使用心得。step1. download js:&lt;script src="../lib/handlebars-v4.0.11.js"&gt;&lt;/script&gt...
Handlebars—semantic template engine
weixin_33827590的博客
05-26 244
概述 刚接触前端的时候，师傅就给我推荐了Handlebars，自己也蛮喜欢它的语法。到现在，Handlebars都已经更新到3.0.3了，是时候重新过一遍文档了。 引入 要使用Handlebars，首先你得download，然后再页面引入，就像这样 <script src="script/lib/jquery.js">...
HandlebarsJS 模板引擎
绿足 博客
05-22 3240
HandlebarsJS 模板引擎   随笔 一. 简单介绍      handlebars.js 目前已经被许多项目广泛使用，它是一个纯JS库。因此可以像使用其它js脚步一样用script标签来包含handlebars.js. 如：     版本兼容： 目前兼容几乎所有主流浏览器，IE7+      handlebars.js 获取方式：http://handlebars
Handlebars学习之——HTML转义
azureternite的专栏
11-04 5552
场景使用{{expression}}时，输出的内容会被转义，如：<div>{{title}}</div>context为{ title: '<p>Hello world</p>' }结果生成html：<div><Hello world></div>最终在页面上显示的就是字符串<p>Hello world</p>如果不想进行html的转义，有两种方法： {{{ SafeString {
Handlebars.js 实际应用
Zsigner的博客
03-08 261
1.获取返回的对象值用{{enrity}}表示 2.获取返回的对象是list可以 //数据结构层次 "playVideos": [ { "title": "title", "instro": "instro", "contentType": 3, "sourceName": "sourceName&
nodejs中使用Handlebars
最新发布
06-07
在 Node.js 中使用 Handlebars 模板引擎，需要先安装 `handlebars` 模块。可以通过 npm 直接安装： ``` npm install handlebars ``` 使用时，需要引入 `handlebars` 模块，并且编译模板，并将模板和上下文数据传递给 `handlebars.compile()` 方法进行渲染： ```javascript const Handlebars = require('handlebars'); const context = { name: 'world' }; const template = 'Hello {{name}}!'; const compiledTemplate = Handlebars.compile(template); const output = compiledTemplate(context); console.log(output); ``` 上面的代码中，`context` 变量是模板中需要渲染的变量，`template` 是 Handlebars 模板字符串。`Handlebars.compile` 方法接受一个模板字符串，并返回一个模板编译函数，该函数可以接受一个上下文对象，并返回渲染后的 HTML 字符串。 需要注意的是，Handlebars 支持很多高级特性，比如条件语句、循环语句、自定义帮助函数等。需要查阅 Handlebars 官方文档来了解更多信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值