Search code examples
javascripthandlebars.jsassemble

Unable to render partials with handlebars and assemblefile.js


I'm using the updated documentation for Assemble.js and am having a hard time getting a clear picture of how to use Partial includes within subfolders using Handlebars.

The only meaningful reference I've found to partial config in assemblefile.js is in the deprecated gulp-assemble doc site.

Assemble.io isn't helpful since it's not up-to-date with the latest github repo.

Here's my assemblefile.js:

'use strict';

var assemble = require('assemble');
var app = assemble();
var streamRename = require('stream-rename');
var markdown = require('helper-markdown');

app.helper('markdown', require('helper-markdown'));

app.task('load', function(callback) {
  app.partials(['templates/partials/*.hbs']);
  app.pages(['templates/*.hbs']);
  callback();
})

app.task('assemble', ['load'], function() {
  return app.toStream('pages')
    .pipe(app.renderFile())
    .pipe(streamRename({extname:'.html'}))
    .pipe(app.dest("./"));
});

app.task('default', ['assemble']);

module.exports = app;

My file structure:

root
---/templates
------index.hbs
------/partials
---------myPartial.hbs

When I try to invoke the partial from index.hbs with:

{{> partials/myPartial.hbs}}

The assemble task generates this error:

The partial partials/myPartial.hbs could not be found

How do I include Handlebars partials within subdirectories with a simple Assemble build?


Solution

  • Just use the stem of the partial filename:

    {{> myPartial }}
    

    There's also a built-in helper called partial that attempts to find the partial by the key (like myPartial) or other properties like path (partials/myPartial.hbs)

    {{partial 'myPartial'}}
    

    More information about how the templates work together can be found in the templates readme. These docs are also linked to from the assemble readme.