• 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. HTML 事件属性_03

    全局事件属性 HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript. 如果你想学习更多关于事件属性,请访问 Jav ...

  2. LINUX下动态库及版本号控制

    针对同一动态组件的不同版本链接和加载. 一.概念                  DLL HELL字面意思是DLL"灾难",是由于com组件(动态库)升级引起的程序不能运行的情况 ...

  3. [ActionScritp 3.0] 使用LocalConnection建立通信

    包 flash.net 类 public class LocalConnection 继承 LocalConnection → EventDispatcher → Object 语言版本:  Acti ...

  4. (medium)LeetCode 278.First Bad Version

    You are a product manager and currently leading a team to develop a new product. Unfortunately, the ...

  5. mac java目录

    /Library/Java/JavaVirtualMachines/jdk1.7.0_10.jdk/Contents/Home mac java的安装目录为 /Library/Java/JavaVir ...

  6. 精妙SQL语句

    asc 按升序排列desc 按降序排列 下列语句部分是Mssql语句,不可以在access中使用.SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据 ...

  7. CSS3 初步学习

    CSS3有一些是与旧版CSS2.1重叠的,有一些是没有浏览器支持的,全学没必要,下面只记录一下有用的. 一.CSS3边框 1.圆角border-radius border-radius:值越大,角越圆 ...

  8. JS打开新窗口的2种方式

    1.超链接<a href="http://www.jb51.net" title="脚本之家">Welcome</a> 等效于js代码 ...

  9. RAD 版本迁移工具，不怕升级麻烦了。

    RAD 版本迁移工具,不怕升级麻烦了. http://community.embarcadero.com/blogs?view=entry&id=8865 migrationtool.exe ...

  10. C# 远程网络唤醒介绍及代码

    一.定义 网络唤醒:唤醒休眠状态下的计算机,而不是已关机的计算机. 优势:可通过定时功能实现自动唤醒计算机,减少人力使用. 实现方法:通过被唤醒机的MAC地址进行广播发送请求,唤醒计算机. 二.硬件设 ...