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

引入：

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>handlebars</title>

  <style>

    .big {

      width: 100px;

      height: 100px;

      border: 1px solid green;

      border-radius: 100px;

      position: relative;

    }

    .small {

      width: 50px;

      height: 50px;

      border: 1px solid green;

      border-radius: 50px;

      position: absolute;

      left: 0;

      right: 0;

      top: 0;

      bottom: 0;

      margin: auto;

      text-align: center;

      line-height: 50px;

    }

  </style>

</head>

<body>

  <div id="container"></div>

  <script id="template" type="text/x-handlebars-template">

    <h1>Hello</h1>

    <h2>Handlebars</h2>

    <table border="1">

      <thead>

        <tr>

          <th>姓名</th>

          <th>年龄</th>

          <th>性别</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>{{name}}</td>

          <td>{{age}}</td>

          <td>{{gender}}</td>

        </tr>

      </tbody>

    </table>

    <p>hello, {{name}}</p>

    <p>{{hello}}</p>

    <table border="1">

      <thead>

        <tr>

          <th>姓名</th>

          <th>年龄</th>

          <th>性别</th>

        </tr>

      </thead>

      <tbody>

        {{#each listOfStudents}}

          <tr>

            <td>{{name}}</td>

            <td>{{age}}</td>

            <td>{{gender}}</td>

          </tr>

        {{/each}}

      </tbody>

    </table>

    <p>hello, {{{person.a.name}}}</p>

    <p>hello, {{person/a/name}}</p>

    <div class="big">

      <div class="small">

        2

      </div>

    </div>

    <div class="big">

      <div class="small">

        3

      </div>

    </div>

    <div class="big">

      <div class="small">

        4

      </div>

    </div>

    <!-- {{circle name}}

    {{circle name}}

    {{circle name}} -->

  </script>

  <script src="./handlebars-v4.0.5.js"></script>

  <script>

    // 获取模板的源代码

    var source = document.getElementById('template').innerHTML;

    // 把模板的源代码，编译成模板对象

    var template = Handlebars.compile(source);

    // 创建helper

    Handlebars.registerHelper('circle', function(data ) {

      // 告诉系统，这个返回值要解析成真正的标签

      var obj = new Handlebars.SafeString('<div class="big"><div class="small">' + data + '</div></div>');

      return obj;

    });

    // 通过模板对象，获取最终html代码

    var html = template({

      person: {

        a: {

          name: 'Tom<input type="text">'

        },

        b: 'hello'

      },

      name: 'Bob',

      age: 20,

      listOfStudents: [

        {

          name: 'bob',

          age: 20,

          gender: 'male'

        },

        {

          name: 'tom',

          age: 22,

          gender: 'male'

        }]

    });

    // console.log(html);

    // 把html代码插入到网页中去

    document.getElementById('container').innerHTML = html;

    // helper

  </script>

</body>

</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. 特效合集（原生JS代码）适合初学者

    1.返回顶部(完全兼容各个浏览器,不含美化) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...

  2. SVD分解的理解[转载]

    http://www.bfcat.com/index.php/2012/03/svd-tutorial/ SVD分解(奇异值分解),本应是本科生就掌握的方法,然而却经常被忽视.实际上,SVD分解不但很 ...

  3. eclipse 清楚git记录的密码

    菜单:window->preferences弹出上述对话框

  4. archlinux 传统方法编译内核linux kernel 3.3.7

    From: http://hi.baidu.com/flashgive/item/eaef6326b5eb73d3a417b662 archlinux中传统方法编译内核 1)下载内核以及补丁并解压: ...

  5. 【caffe-windows】 caffe-master 之 matlab接口配置

    平台环境: win10 64位 caffe-master  vs2013 Matlab2016a 第一步: 打开\caffe-master\windows下的CommonSettings.props文 ...

  6. Linux 本人常用到的基本命令

    cat -n FileName //查看FileName文件的内容.-n显示对应行号. yum install SoftName //安装软件,切记使用root权限. service //查看服务.例 ...

  7. 10.11 安装pod

    原文地址:http://www.jianshu.com/p/5fc15906c53a  感谢. 更新升级10.11 cocoapods安装出问题最简单的解决方法 这是因为10.11把cocoapods ...

  8. C++学习基础八——重载输入和输出操作符

    一.重载输入操作符的要点: 1.返回值为istream &. 2.第一个参数为istream &in. 3.第二个参数为自定义类型的引用对象(例如Sales_Item &ite ...

  9. PIC32MZ tutorial -- Hello World

    Today I implement "Hello World" on PIC32MZ EC starter kit. The application of "Hello ...

  10. “VS2013无法连接远程数据库”解决方案

    “VS2013无法连接远程数据库” 解决方案:以管理员身份登录CMD,输入netsh winsock reset并回车(注意,必须是已管理员身份运行,这个重置LSP连接) 或 netsh winsoc ...