handlebars handlebars文档

Handlebars 是一种简单的 模板语言。
它使用模板和输入对象来生成 HTML 或其他文本格式。Handlebars 模板看起来像常规的文本，但是它带有嵌入式的 Handlebars 表达式 。

这里我们要注意模板引擎的定义

模板引擎是对一串字符串 结合数据 编译后生成 另外一串字符串 本质上和html没什么关系,只不过可以用来渲染html模板, 其编译语言也是多样的, javascript ruby 等

所以我们会说vue并不是单纯的模板引擎, vue的模板编译语言只有javascript 读过源码的都是知道render函数
因为vue是专注于某一种形式的模板的(例如dom对象), vue这样做的好处是能够对模板做更多的处理, 比如绑定事件, 专注于 javascript 表达式等

前后端分离的模式下在浏览器中使用handlerbars, 本质是基于正则替换的, 因为浏览器端没有直接读写模板文件的能力, 这种用法知道就可以, 正常没人会这么做, 没有任何优势便捷性可言

handlebars 等模板引擎一般用于传统的服务端开发
web服务端通过收到用户请求–>查询数据库–>填充模板–>发送渲染好的模板(html)

下面是基于express node框架的一个例子

根路由转发

const express = require('express');
var router = express.Router();

const data = {
  data: [
    {
      name: 'zhang',
      age: 18,
      sex: 1,
      withme: {
        name: '0k'
      }
    },
    {
      name: 'li',
      age: 15,
      sex: 0,
      withme: {
        name: '0k'
      }
    },
    {
      name: 'wang',
      age: 8,
      sex: 1,
      withme: {
        name: '0k'
      }
    }
  ],
  name: 'yes'
};
router.get('/', function (req, res, next) {
  res.render('index', data);
});

module.exports = router;

index.hbs

<ul>
  {{#each data}}
    {{#each this}}
      <li>
        {{@key}}
        ---
        {{../../name}}
      </li>
    {{/each}}
    <li style='color: red'>
      {{#with withme}}
        {{name}}
      {{/with}}
      -----
      {{name}}</li>
    <li>
      name:
      {{this.name}}
    </li>
    <li>
      age:
      {{this.age}}</li>
    {{#if this.sex}}
      <li>男</li>
    {{/if}}
    {{#unless this.sex}}
      <li>女</li>
    {{/unless}}
      <li><br /></li>
  {{/each}}
</ul>

渲染结果:

本文最重要的是模板引擎的概念 😃