使用partial作为散列参数的自定义Handlebars Helper

Question

我正在尝试创建一个自定义车把帮助器，我希望能够传递它一个"基本模板"和一个"部分".

所以它应该做的是渲染基本模板，然后渲染作为第二个参数传递的任何partials。

我现在有以下内容:

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);
};

};

现在我像这样使用我的帮助器:

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

我现在有点卡住了。目前我只能弄清楚如何渲染基础模板或部分…或者渲染基模板，但从局部的上下文(这是yaml字体的问题)我想要实现的是基模板被渲染和部分内容被渲染在它里面，在部分中定义的任何上下文。

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>

部分:

---
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>

提前感谢!丹

Answer 1

所以，我自己修复了它!华友世纪. .

我坐下来仔细考虑了一下，得出的结论是，我只需要将第二个哈希参数注册为partial。

所以我在handlebars。compile(obj.content);

之后添加了这个

Handlebars.registerPartial("sgComponentContent", partial);

在基模板中我可以使用{{> sgComponentContent}}

太棒了!