Koa-handlebars: Unable to render view: The partial could not be found
Question
// 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>
Node code that runs:
app.use(handlebars({
defaultLayout: 'main'
}));
app.use(function* () {
yield this.render('home-public', {
user: {
email: "name@example.com"
}
});
});
I can't see what's wrong. Any ideas?
1 answers
solution1
0 2015-10-29 04:08:59
This one caught me out at first, too. The reason is that you're using hyphens and/or path separators in your {{> partial-name}} calls, which seems reasonable when you're coming from express-handlebars. The answer is in the documentation:
partialId(file)
This function is a little backwards compared to layouts and views, but it takes a path for a partial template file. (relative to partialsDir) and converts it into a handlebars-friendly identifier.
For example: "navigation.hbs" => "navigation"
By default, it will strip the extension and camel-case the remaining string.
For example: "nav/main.hbs" => "navMain"
So basically, by default it's going to translate your partial path completely into camelCaseForHyphensAndDirectorySlashes, for example example/my-partial would require a partial call of {{> exampleMyPartial }} .
This is fortunately fairly easy to customise if you prefer to use a partial name that actually represents your partial's file path. Here's the config I use (I use the strip-extension module to get rid of the file extension):
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('\\', '/');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.