使用 Handlebars 创建部分答案

【问题标题】：Creating a partial with Handlebars使用 Handlebars 创建部分
【发布时间】：2020-04-28 09:11:49
【问题描述】：

我一般是网站的新手，我不知道如何在使用车把时创建部分。

我正在尝试为我的导航栏使用部分内容，因此我不必将其复制到每个把手文件中并在任何更改后更改所有文件。我在网上看到的大多数地方都使用快递。当我查看车把指南时，部分创建包括：

Handlebars.registerPartial("myPartial", "{{name}}");

我不明白 {{name}} 是什么，我尝试包含 {{UserType}} 但它只会在页面顶部显示 Admin 而不是导航栏部分的内容。

使用 Handlebars.registerPartial 时，我知道第一个参数是部分的名称。我在同一个views文件夹中创建了它，并在partials文件夹中创建了它，以防万一出现问题。我不明白第二个参数应该是什么，如果我将其留空，则会引发错误“错误：尝试将名为“navBar”的部分注册为未定义”。

任何帮助将不胜感激，谢谢。

以下是重要文件： index.js

#!/usr/bin / env node

//Routes File

'use strict'

/* MODULE IMPORTS */
const Koa = require('koa')
const Router = require('koa-router')
const views = require('koa-views')
const staticDir = require('koa-static')
const bodyParser = require('koa-bodyparser')
const session = require('koa-session')
const path = require('path')

const Handlebars = require('handlebars')
Handlebars.registerPartial('navBar', ???)

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

/* CONFIGURING THE MIDDLEWARE */
app.keys = ['darkSecret']
app.use(staticDir('public'))
app.use(bodyParser())
app.use(session(app))
app.use(views(`${__dirname}/views`, { extension: 'handlebars' }, { map: { handlebars: 'handlebars' } }))

const home = require('./routes/home.js')
const user = require('./routes/user.js')
const restaurant = require('./routes/restaurant.js')
const review = require('./routes/review.js')

const defaultPort = 8080
const port = process.env.PORT || defaultPort

/*Session Data
    ctx.session.authorised
    ctx.session.user
    ctx.session.usertype
*/

app.use(home.routes())

app.use(user.routes())

app.use(restaurant.routes())

app.use(review.routes())

Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
    if (arg1 === arg2) {
        return options.fn(this)
    } else {
        return options.inverse(this)
    }
})

app.use(router.routes())
module.exports = app.listen(port, async() => console.log(`listening on port ${port}`))

navBar.handlebars

<div class="navBar">
    <a name="NavbarHome" href="http://localhost:8080/">Home</a>

    {{#if Authorised}}

    {{#ifEquals UserType "Admin"}}
    <a name='NavbarAddRestaurant' href="http://localhost:8080/addRestaurant">Add Restaurant</a>
    <a name='NavbarPendingReviews' href="http://localhost:8080/pendingReviews">Pending Reviews</a>
    {{/ifEquals}}

    {{#ifEquals UserType "Customer"}}
    <a name='NavbarCustomer' href="#Customer">Customer</a>
    {{/ifEquals}}

    <a name="NavbarLogout" href="http://localhost:8080/logout">Logout</a>
    {{else}}
    <a name="NavbarLogin" href="http://localhost:8080/login">Login</a>
    <a name="NavbarRegister" class="active" href="http://localhost:8080/register">Register</a>
    {{/if}}
</div>

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Create an Account</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    {{> navBar}}
    <h1>Create an Account</h1>
</body>

</html>

【问题讨论】：

标签： javascript node.js handlebars.js navbar partials

【解决方案1】：

我找到了这个网站，它指出了如何正确设置部分。

https://blog.fossasia.org/using-partials-in-handlebars-and-reusing-code/

【讨论】：