node 第十六天模板引擎handlebars

本文主要是介绍node 第十六天模板引擎handlebars，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>