使用车把创建零件

问题描述 投票:1回答:1

我一般都不熟悉网站内容,我无法弄清楚如何在使用把手时创建部分内容。

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

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>

register.handlebars

<!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个回答
0
投票

我找到了这个站点,它指示了如何正确设置部分站点。

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

© www.soinside.com 2019 - 2024. All rights reserved.