• 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. Asp.net MVC 之异常处理

    对于Asp.Net MVC 项目中,对于异常情况下,会跳转到自己定义好的页面,这时就用到了MVC中的异常过滤器(Exception Filters) (1)一旦action 方法中出现异常,异常过滤器 ...

  2. RNG vs EDG | SKT vs KTB [20160826]

    G1 RNG:丽桑卓,古拉加斯,强行开团流. EDG:崔斯特,普朗克,伊莉斯游走,全球支援流,小规模团战能以多打少. G2 RNG:塔莉垭,纳尔,烬. EDG:雷克塞,艾克,劫,冲击后排. G3 RN ...

  3. Zero Requiem

    “最后是在游行.暴君鲁路修高居王座,两侧列着所有反对者的代表:黑色骑士团.黎星刻.原圆桌骑士名列第三的吉诺,以及一身女囚装的娜娜丽,他们都即将被公开处死.尤菲米娅在第一次“特别行政区•日本”成立仪式上 ...

  4. 玩转单元测试之Testing Spring MVC Controllers

    玩转单元测试之 Testing Spring MVC Controllers 转载注明出处:http://www.cnblogs.com/wade-xu/p/4311657.html The Spri ...

  5. The default for KeyValuePair

    if (getResult.Equals(new KeyValuePair<T,U>())) or this: if (getResult.Equals(default(KeyValueP ...

  6. [VB.NET]取消按钮按下的默认事件响应

    大家应该有过这样的经历:有两个文本框a,b.通过编程,当我们在A中回车后,光标会移动到B文本框. 但是,不可避免的会听到一声“铛”的声音. 解决办法: 在Keydown或者KeyUp事件中,设置e.S ...

  7. 升级正版win10及保持yosemite双操

    因为有同事升级了正版的win10,心头长草了,本来x230的win7就是正版,现在win10可以免费升级,为何不做? 为此跑了2趟lenovo的维修站,诸多限制,最终决定自己搞定.据说,需要恢复到原厂 ...

  8. 如何在博客中插入jsfiddle的代码

    1.进入官网:https://jsfiddle.net/ 可以看到如下界面,顶端的控制按钮包括:保存,运行,代码格式化等: 2.将html.css.js分别写在指定的位置当中,最后一个框result是 ...

  9. 关于ILDASM.EXE的知识整理

    因为现在用的VS2010,发现,这个工具自己就带着ILDASM.EXE这个反编译工具 具体的查找方式为: C:\Program Files\Microsoft SDKS\Windows\V7.0\bi ...

  10. projecteuler Problem 8 Largest product in a series

    The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × 8 × 9 = ...