欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Handlebars 模板引擎,及在 node 项目中使用

程序员文章站 2022-06-19 11:58:15
...

Handlebars 模板引擎,及在 node 项目中使用

说明

Handlebars,是一个语义化的模板,它看起来和 HTML 一样,只是嵌入了 handlebars 表达式。

1. 在 node 项目中的使用

1. express 项目文件配置

    yarn add express # 4.16.2
    yarn add express-handlebars # 3.0.0
    const express = require('express');
    const http = require('http');
    const path = require('path');

    const app = express();
    const exphbs = require('express-handlebars'); // 引入 hanlebars 解析

    // 设置模板为 handlebars
    app.set('views', path.join(__dirname, 'views'));
    const hbs = exphbs.create({
       extname: '.hbs', // 设置文件后缀
       layoutsDir: ['views/'] // 设置模板文件的目录
    })
    app.engine('hbs', hbs.engine); // 设置其模板引擎,名称为 'hbs'
    app.set('view engine', 'hbs'); // 将当前默认模板引擎设置为 ’hbs‘

    app.all('/', function (req, res, next) {
       res.render('home', {name: 'xxx'}); // 传入变量数据,也可以设置为 app.locals 的值
    })

    const server = http.createServer(app);

    server.listen('8456', function () {
       console.log('\nexpress server start at http://localhost:' + 8456);
    })

2. koa 项目文件配置

    yarn add koa # 2.4.1
    yarn add koa-router # 7.3.0
    yarn add koa-views # 6.1.3
    const Koa = require('koa');
    const Router = require('koa-router');
    const views = require('koa-views'); // 用来处理各种模板编译
    const path = require('path');

    const app = new Koa();
    const router = new Router();

    // 添加处理模板的中间件
    app.use(views(path.join(__dirname, 'views'), {
       map: {hbs: 'handlebars'}
    }))

    router.get('/', async (ctx, next) => {
       await ctx.render('home.hbs', {name: 'yyy'}); // 也可以使用 ctx.state 的数据
    })

    app.use(router.routes());
    app.use(router.allowedMethods())

    app.listen('7654', function () {
       console.log('server in http://localhost:' + 7654);
    })

2. API 详解

静态的代码与 HTML 一致

1. 渲染变量

  • Handlebars 通过 {{expression}} 双大括号渲染变量,并且变量会经过编码
  • 如果不希望编码可以使用 {{{expression}}} 三个大括号
    <div>
        转码后 {{script}}
    </div>
    <div>
        未转码渲染为标签 {{{script}}}
    </div>

2. 渲染列表 each helper

  • this 表示当前上下文,用来访问当前项
  • @index 表示当前列表的索引
  • else 用来定义没有数据时的显示
  • @key 当遍历的是对象时,@key 表示属性名 this 为属性值
   <ul>
      {{#each members}}
         <li>member is {{this}},index is {{@index}}</li>
      {{else}}
         <li>this is empty</li>
      {{/each}}
      <p> ==== === ==== ===== ===== </p>
      {{!-- list: [{name: '', age: ''}] --}}
      {{#each list}}
         <li>name: {{name}}, age: {{age}}</li>
      {{else}}
         <li>this is empty</li>
      {{/each}}
      {{!-- obj: {name: '', age: '', tel: ''} --}}
      {{#each obj}}
         <li>{{this}} -- {{@key}}</li>
      {{/each}}
   </ul>

3. 渲染对象 with helper

with 可以改变当前上下文

   <div>
      {{!-- obj: {name: '', age: '', tel: ''} --}}
      {{#with obj}}
         <p>{{name}} : {{age}} : {{tel}}</p>
      {{/with}}
   </div>

4. 条件渲染 if helper

  • if true 渲染
  • unless false 渲染
   <div>
      {{!-- name: '' --}}
      {{#if name}}
         <p>name is {{name}}</p>
      {{else}}
         <p>empty</p>
      {{/if}}
   </div>
   <div>
      {{!-- name: '' --}}
      {{#unless name}}
         <p>name is {{name}}</p>
      {{else}}
         <p>empty</p>
      {{/unless}}
   </div>

5. 路径

Handlebars 支持简单的嵌套路径,便于属性查找

   <div>
      {{!-- content: {body: {link: '', members: []}} --}}
      {{content.body.link}}
      {{!-- with 者部分作用是让 members 所在作用域对应的对象位置为 body 内部 --}}
      {{#with content.body}}
         {{#each members}}
            <p>name: {{name}}</p>
            <p>currentLink: {{this.link}}</p>
            <p>link: {{../link}}</p>
         {{/each}}
      {{/with}}
   </div>

6. 注释

   <div>
      {{! 这种注释不会出现在编译后的 HTML 中 }}
      <!-- 这种注释会出现在编译后的 HTML 中 -->
      {{!-- 
         这种注释是多行注释
       --}}
   </div>