Koa 车把:无法呈现视图:找不到部分

Koa-handlebars: Unable to render view: The partial could not be found

本文关键字:视图 找不到部 车把 Koa      更新时间:2023-09-26
// project/layouts/main.hbs
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    {{{@body}}}
</body>
</html>

// project/views/home-public.hbs
{{> nav-public}}
<div class="container">
    <div class="starter-template">
        <h1>Home Public</h1>
        <p class="lead">This is my home.</p>
    </div>
</div>

// project/partials/nav-public.hbs
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Example</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Journey</a>
                </li>
                <li><a href="/">Departures</a>
                </li>
                <li><a href="about" style="margin-left:1em">About</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/signout">Sign in</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

运行的节点代码:

app.use(handlebars({
    defaultLayout: 'main'
}));
app.use(function* () {
    yield this.render('home-public', {
        user: {
            email: "name@example.com"
        }
    });
});

我看不出有什么问题。有什么想法吗?

这个一开始也让我很感兴趣。原因是您在{{> partial-name}}调用中使用连字符和/或路径分隔符,当您来自快速车把时,这似乎是合理的。答案在文档中:

部分 Id(文件(

与布局和视图相比,此函数有点向后,但它采用部分模板文件的路径。(相对于 partialsDir(并将其转换为车把友好的标识符。

例如:"navigation.hbs" => "navigation">

默认情况下,它将去除扩展名并驼峰大小写剩余的字符串。

例如:"nav/main.hbs" => "navMain">

所以基本上,默认情况下它会将您的部分路径完全转换为 camelCaseForHyphensAndDirectorySlashes,例如example/my-partial需要部分调用 {{> exampleMyPartial }}

幸运的是,如果您更喜欢使用实际代表部分文件路径的部分名称,则这很容易自定义。这是我使用的配置(我使用条形扩展模块来摆脱文件扩展名(:

var stripExtension = require('strip-extension');
app.use(koaHandlebars({
  partialId: function(file) {
      // Note: the .replace below is just to normalise windows paths, you
      // may not need it.
      return stripExtension(file).replace('''', '/');
  }
});