• Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。
  • 简单的说就是：Handlebars是一个很好的前后端的分离的方案

引入：

代码写在body下的script标签里面，并且id="template",type的类型为type="text/x-handlebars-template"

记得还要去js中去配置一些东东：

算了吧，来一篇直接粘贴过去就能拿来用的，以后一号拿来复习再巩固

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>handlebars</title>
  6.   <style>
  7.     .big {
  8.       width: 100px;
  9.       height: 100px;
  10.       border: 1px solid green;
  11.       border-radius: 100px;
  12.       position: relative;
  13.     }
  14.     .small {
  15.       width: 50px;
  16.       height: 50px;
  17.       border: 1px solid green;
  18.       border-radius: 50px;
  19.       position: absolute;
  20.       left: 0;
  21.       right: 0;
  22.       top: 0;
  23.       bottom: 0;
  24.       margin: auto;
  25.       text-align: center;
  26.       line-height: 50px;
  27.     }
  28.   </style>
  29. </head>
  30. <body>
  31.   <div id="container"></div>
  32.   <script id="template" type="text/x-handlebars-template">
  33.     <h1>Hello</h1>
  34.     <h2>Handlebars</h2>
  35.     <table border="1">
  36.       <thead>
  37.         <tr>
  38.           <th>姓名</th>
  39.           <th>年龄</th>
  40.           <th>性别</th>
  41.         </tr>
  42.       </thead>
  43.       <tbody>
  44.         <tr>
  45.           <td>{{name}}</td>
  46.           <td>{{age}}</td>
  47.           <td>{{gender}}</td>
  48.         </tr>
  49.       </tbody>
  50.     </table>
  51.     <p>hello, {{name}}</p>
  52.     <p>{{hello}}</p>
  53.     <table border="1">
  54.       <thead>
  55.         <tr>
  56.           <th>姓名</th>
  57.           <th>年龄</th>
  58.           <th>性别</th>
  59.         </tr>
  60.       </thead>
  61.       <tbody>
  62.         {{#each listOfStudents}}
  63.           <tr>
  64.             <td>{{name}}</td>
  65.             <td>{{age}}</td>
  66.             <td>{{gender}}</td>
  67.           </tr>
  68.         {{/each}}
  69.       </tbody>
  70.     </table>
  71.  
  72.     <p>hello, {{{person.a.name}}}</p>
  73.     <p>hello, {{person/a/name}}</p>
  74.  
  75.     <div class="big">
  76.       <div class="small">
  77.         2
  78.       </div>
  79.     </div>
  80.     <div class="big">
  81.       <div class="small">
  82.         3
  83.       </div>
  84.     </div>
  85.     <div class="big">
  86.       <div class="small">
  87.         4
  88.       </div>
  89.     </div>
  90.  
  91.     <!-- {{circle name}}
  92.     {{circle name}}
  93.     {{circle name}} -->
  94.   </script>
  95.   <script src="./handlebars-v4.0.5.js"></script>
  96.   <script>
  97.     // 获取模板的源代码
  98.     var source = document.getElementById('template').innerHTML;
  99.     // 把模板的源代码，编译成模板对象
  100.     var template = Handlebars.compile(source);
  101.     // 创建helper
  102.     Handlebars.registerHelper('circle', function(data ) {
  103.       // 告诉系统，这个返回值要解析成真正的标签
  104.       var obj = new Handlebars.SafeString('<div class="big"><div class="small">' + data + '</div></div>');
  105.  
  106.       return obj;
  107.     });
  108.     // 通过模板对象，获取最终html代码
  109.     var html = template({
  110.       person: {
  111.         a: {
  112.           name: 'Tom<input type="text">'
  113.         },
  114.         b: 'hello'
  115.       },
  116.       name: 'Bob',
  117.       age: 20,
  118.       listOfStudents: [
  119.         {
  120.           name: 'bob',
  121.           age: 20,
  122.           gender: 'male'
  123.         },
  124.         {
  125.           name: 'tom',
  126.           age: 22,
  127.           gender: 'male'
  128.         }]
  129.     });
  130.  
  131.     // console.log(html);
  132.     // 把html代码插入到网页中去
  133.     document.getElementById('container').innerHTML = html;
  134.  
  135.     // helper
  136.   </script>
  137. </body>
  138. </html>

　　

handlebars的更多相关文章

  1. Handlebars 模板引擎之前后端用法

    前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...

  2. handlebars自定义helper的写法

    handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性,我个人特别喜欢.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式 ...

  3. handlebars.js的运用与整理

    最近在做部门的技术分享网站,主要是一些文章的列表和演讲信息展示,内容比较规律,复用性较高.同事推荐了 handlebars.js.用来看看. handlebars.js是一种静态JS模板,用起来还蛮简 ...

  4. Express 4 handlebars 不使用layout写法

    Express 4 handlebars 不使用layout写法 Express node nodejs handlebars layout 最近刚开始学习使用nodejs. 使用express搭建了 ...

  5. Handlebars.js的学习

    写在开头的话: 在使用Ghost搭建自己的博客的时候,发现不会Handlebars.js寸步难行,所以本人决定学习下Handlebars.js,因此在此做个记录 为什么选择Handlebars.js ...

  6. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  7. Handlebars块级Helpers

    1.Handlebars简单介绍: Handlebars是JavaScript一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less templat ...

  8. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  9. handlebars.js 用 <br>替换掉 内容的换行符

    handlebars.js 用 <br>替换掉 内容的换行符 JS: Handlebars.registerHelper('breaklines', function(text) { te ...

  10. 【前端】制作一个handlebars的jQuery插件

    (function($) { var compiled = {}; $.fn.handlebars = function($srcNode, data) { // 取出模版内容 var src = $ ...

随机推荐

  1. 使用 7za.exe 打包文件

    7za.exe 下载地址:http://www.7-zip.org/a/7za920.zip 7za <command> [<switch>...] <base_arch ...

  2. linux查看磁盘io的几种方法

    怎样才能快速的定位到并发高是由于磁盘io开销大呢?可以通过三种方式: 第一种:用 top 命令 中的cpu 信息观察 Top可以看到的cpu信息有: Tasks: 29 total, 1 runnin ...

  3. c++ 中__declspec 的用法

    __declspec ( extended-decl-modifier-seq )扩展修饰符:1:align(#)    用__declspec(align(#))精确控制用户自定数据的对齐方式 ,# ...

  4. mysql <-> sqlite

    在做程序时,sqlite数据很方便.用mysql数据导出到sqlite的步骤:(用csv文件过渡) -------------------------------  先导出到csv文件  ------ ...

  5. #ifdef #ifndef使用

    #ifdef THREAD_ON while (TRUE) #endif 如上没定义THREAD_ON时,是不会跑到while中去的 如上没定义THREAD_ON时,是会跑到else中去的 #ifnd ...

  6. mysql 修改字段类型

    1.更改Float字段类型to Decimal ALTER TABLE 表名 MODIFY 字段名 decimal(10,2) not null default '0': 如: ALTER TABLE ...

  7. 根据 MySQL 状态优化 ---- 3. key_buffer_size

    查看 MySQL 服务器运行的各种状态值: mysql> show global status: 3. key_buffer_size key_buffer_size 是设置 MyISAM 表索 ...

  8. Windows下配置nginx根目录的问题

    location / { root E:/xampp/htdocs/html5/php/yii2-rest-master/rest/web; index index.html index.htm; } ...

  9. 飞凌OK6410开发板SDIO无线8189WIFI模块驱动移植

    为什么要移植?开发板不是已经提供了无线驱动吗? 貌似是这样的..本来是好用的.加入自己第三方驱动后发现WIFI用不了...最后发现飞凌提供的内核里面没有8189芯片的代码...问售后他们说那边是好的. ...

  10. c/c++ 对象内存布局

    一.对象内存查看工具 VS 编译器 CL 的一个编译选项可以查看 C++ 类的内存布局,非常有用.使用如下,从开始程序菜单找到 Visual Stdio 2012. 选择 VS 的命令行工具,按如下格 ...