• 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. 将框架的底层改掉，改成一个轻量级的ORM

    公司底层的缺点 1.功能有限,只有增删查改 2.不支持异步 3.不支持懒加载 4.不支持泛型 5.不支持Linq 6.性能没做到最好,比如FirsttOrDefault()只能通过查找select * ...

  2. 如何在LLDB下排查message sent to deallocated instance问题

    转:http://www.devdiv.com/home.php?mod=space&uid=50901&do=blog&id=50856 在XCode的以前版本中,如果遇到了 ...

  3. 68. Longest Common Prefix

    Longest Common Prefix Write a function to find the longest common prefix string amongst an array of ...

  4. Karma 4 - Karma 集成 Webpack 进行单元测试

    可以将 karma 与 webpack 结合起来,自动化整个单元测试过程. 配置环境 1. 首先根据 1 完成基本的 karma 测试环境. 2. 安装 webpack 和 webpack 使用的 l ...

  5. HTC ONE里面一个非常奇怪的问题。。。调用kSOAP出错

    也是在某统计网站上看到了我们的APP爆出了这么一个bug: java.lang.NoSuchFieldError: No instance field headerOut of type [Lorg/ ...

  6. Angular $http解析通过接口获得的json数据

    刚接触angular不久,对很多东西都不了解,今天需要用angular通过接口得到json数据,折腾了好久,总算是能获取到数据了,下面是部分源码,仅供参考: HTML部分: <body ng-a ...

  7. ubuntu 开机显示错误：无法应用原保存的显示器配置

    无法应用原保存的显示器配置CRTC 63:尝试 800x600@60Hz 模式输出在 1366x768@60Hz (通过 0)CRTC 63:尝试 2560x1600@60Hz 模式输出在 1366x ...

  8. NRF51822之SPI

    /**@brief Function for initializing a SPI master driver. * * @param[in] p_instance Pointer to SPI ma ...

  9. WebForm---登陆状态保持（Cookies内置对象）

    登录状态保持: 首先做一个登录界面,点击 登录按钮 protected void Page_Load(object sender, EventArgs e) { Button1.Click += Bu ...

  10. javascript-test1

    var AAA = function(name, age) { this.name = name ; this.age = age; } AAA.prototype.getName = functio ...