Custom Handlebars Helper with partial as hash argument

Question

I'm trying to create a custom handlebars helper, and I want to be able to pass it a "base-template" and a "partial"..

So what it should do is render the base template and then render whatever partials is passed as the second parameter.

I have the following right now:

module.exports.register = function(Handlebars, options) {

  var assembleOpts = options || {};

  Handlebars.registerHelper("sgComponent", function (template, partial, options) {

  // Default options
  var opts = {
    cwd: '',
    src: '',
    glob: {}
  };

  options = _.defaults(options.hash, assembleOpts.sgComponent, opts);

  var partialContent, partialContext;

  // Join path to 'cwd' if defined in the helper's options
  var cwd = path.join.bind(null, options.cwd, '');
  var src = path.join.bind(null, options.src, '');

  glob.find(src(partial), options.glob).map(function(path) {
    partialContext = yfm.extract(path).context;
    partialContent = yfm.extract(path).content;
  });

  return glob.find(cwd(template), options.glob).map(function(path) {
    var context = yfm.extract(path).context;
    var content = yfm.extract(path).content;

    return {
      path: path,
      context: processContext(grunt, partialContext),
      content: content
    };
  }).map(function (obj) {
    var template = Handlebars.compile(obj.content);
    return new Handlebars.SafeString(template({content: obj.context}));
  });
});

var processContext = function(grunt, context) {
  grunt.config.data = _.defaults(context || {}, _.cloneDeep(grunt.config.data));
  return grunt.config.process(grunt.config.data);
};

};

And right now I'm using my helper like this:

{{{sgComponent 'path/to/basetemplate/basetemplate.hbs' 'path/to/partial/partial.hbs'}}}

I'm a little stuck right now. At the moment I can only figure out how to render either the base template or the partial.. Or render the base template but with the context from the partial (it's yaml font matter) What I would like to achieve is the basetemplate being rendered and the partials content being render inside of it, with whatever context defined in the partial.

Like so (base template):

<div class="sg-component">
  <!-- Markup -->
  <div class="sg-component__markup">
   {{partial}}
  </div>

  <!-- Documentation -->
  <div class="sg-component__documentation">
  {{#markdown}}
    ~~~markup
    {{partial}}
    ~~~
  {{/markdown}}
  </div>
</div>

Partial:

---
context: context stuff here
---

<h1 class="title--huge"><a href="#">This is a very large header</a></h1>
<h2 class="title--xlarge"><a href="#">This is a large header</a></h2>
<h3 class="title--large"><a href="#">This is a medium header</a></h3>
<h4 class="title--medium"><a href="#">This is a moderate header</a></h4>
<h5 class="title--small"><a href="#">This is a small header</a></h5>
<h6 class="title--xsmall"><a href="#">This is a tiny header</a></h6>

Thanks in advance! Dan

Answer 1

So, I fixed it my self! Hurray..

I sat down it thought it through and came to the conclusion that I only needed to register the second hash argument as a partial.

So I added this after the Handlebars.compile(obj.content);

Handlebars.registerPartial("sgComponentContent", partial);

And then within my basetemplate I can now use {{> sgComponentContent}}

Awesome!