Question

我正在尝试组织我的代码，但无法弄清楚如何（或根本不提供）来自多个文件的车把值。

我目前正在利用express和express-handlebars来建立网站。 header和navigation bar是局部的，而内容将使用{{{body}}}标记。现在，当导航到特定页面时，暂时将其设置为“ /”，我最终将最终调用：

res.render('index', {
    title: "Home"
});

在这里，我将title传递到layout.hbs，后者将index.hbs文件放入{{{body}}}标记中。 title用于标题部分。很好，标题很可能会根据为内容{{{body}}}区域呈现的内容而变化。但是，我还拥有始终相同的数据，例如位于我的navigation bar中的用户数据（用户名和头像在其顶部）。我现在总是需要将用户名和头像都传递给res.render(..)调用。那是正常的还是我可以以某种方式拆分？

实际的res.render调用看起来像这样的atm：

router.get('/', catchAsync(async (req, res, next) => {  
    if(req.authenticated) {
        res.render('index', {
            title: "Home",
            authenticated: true,
            username: req.userdetails.username,
            userid: req.userdetails.id,
            avatarid: req.userdetails.avatar
        });
    }
    else {
        // Render index view
        res.render('index', { 
            title: "Home",
            authenticated: false
        });
    }
}));

req.authenticated和req.userdetails数据来自我放置在路由前面的中间件，因此在显示重要数据之前，我可以确保对用户进行正确的身份验证（可能不是最好的）解决方案，但目前仍有效，并且不是该问题的主题。

现在整个设置都使用一个layout.hbs，看起来像这样：

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- General Settings -->
        <meta charset="utf-8">
        <title>Some Title</title>
        <meta name="description" content="Some Description.">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- Material Design Light -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-deep_orange.min.css" />
        <link rel="stylesheet" href="/css/main.css">
    </head>
    <body>
        <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
            {{> header }}
            {{> navigation }}
            <!-- Content -->
            <main class="mdl-layout__content">
                {{{ body }}}
            </main>
        </div>
        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    </body>
</html>

呼叫res.render将始终通过此layout.hbs，而{{> navigation}}则需要传递用户名和头像。我希望这些数据来自其他地方。因为否则我最终将传递20个变量到该特定的render调用，只是因为我还需要传递导航栏和标题中的所有内容。

是否不可能有另一个JavaScript文件调用类似于res.render的东西，但仅针对{{> navigation}}部分？

最后，我很想得到这样的东西：

内容页面仅获得标题：

router.get('/', catchAsync(async (req, res, next) => {  
    if(req.authenticated) {
        res.render('index', {
            title: "Home",
            authenticated: true
        });
    }
    else {
        // Render index view
        res.render('index', { 
            title: "Home",
            authenticated: false
        });
    }
}));

导航栏从其他地方只能获取用户名：

res.render('{{> navigation}}', {
    authenticated: true,
    username: req.userdetails.username,
    userid: req.userdetails.id,
    avatarid: req.userdetails.avatar
});

或者部分可以从特定上下文中提取数据？

感谢您的时间！

我是否必须一次传递所有车把数据，或者它们可以来自多个不同的地方？

0 个答案: