• 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. Android中如何监听GPS开启和关闭

    转自 chenming 原文 Android中如何监听GPS开启和关闭   摘要: 本文简单总结了如何监听GPS开关的小技巧 有时需要监听GPS的开关(这种需求并不多见).实现的思路是监听代表 GPS ...

  2. Spring Boot 性能优化

    spring 框架给企业软件开发者提供了常见问题的通用解决方案,包括那些在未来开发中没有意识到的问题.但是,它构建的 J2EE 项目变得越来越臃肿,逐渐被 Spring Boot 所替代.Spring ...

  3. 扫地雷II

    感谢格致杭业晟同学改进完善 uses crt;var  i,j,k,ls,x,y:byte;  b:array[0..11,0..11] of shortint;  f:array[0..11,0.. ...

  4. MSSQL导入导出数据

    /******* 导出到excel */ EXEC master..xp_cmdshell 'bcp SettleDB.dbo.shanghu out c:\temp1.xls -c -q -S&qu ...

  5. iOS 设置页面的代码编写

    突然觉得好久没有更新博客了,今天就想把自己的项目中的一些功能和常用的模块写出来给大家参考一下... 这是我的二个项目中的不同的设置界面,第一个设置的那个按钮是 用的开关switch ,当然这个就容易一 ...

  6. QueryRunner(common-dbutils.jar)

    QueryRunner update方法:* int update(String sql, Object... params) --> 可执行增.删.改语句* int update(Connec ...

  7. cocos2d中的可见性检测

    游戏的在进行一次渲染的时候,通常会提交大量的渲染对象给gpu.在这些需要渲染的对象中,并不是所有对象都会出现镜头中,即有一部分对象是不可见的. 通常有两种方式来完成不可见对象的剔除工作: (1)直接交 ...

  8. 【Tree 1】树形结构数据呈现的递归算法实现

    一.基本概况 在我的项目中,常常会用到树形结构的数据,最为明显的就是左边菜单栏,类似于window folder一样的东西. 而我之前一直是借助前端封装好的ZTree等工具实现展示,而后台则通常使用递 ...

  9. 一千行MySQL学习笔记

    以下为本人当年初学MySQL时做的笔记,也从那时起没再更新过,但还是囊括了基本的知识点,有时还翻出来查查.是不是干货,就看亲们了~ 如果哪天笔记有更新了,我还是会更新该文章滴,其实笔记已经放到了Git ...

  10. JS 驗證英文字母

    //英文简介栏位焦点离开事件    function checkSummaryEN(SummaryEN) {        var val = $(SummaryEN).val();        v ...