0

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

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

我现在有以下内容：

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 字体问题）我想要实现的是正在渲染的基本模板和部分内容在其中呈现，其中包含部分中定义的任何上下文。

像这样（基本模板）：

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

提前致谢！担

4

1 回答 1

0

所以，我自己修好了！欢呼..

我坐下来仔细考虑并得出结论，我只需要将第二个哈希参数注册为部分。

所以我在 Handlebars.compile(obj.content); 之后添加了这个

Handlebars.registerPartial("sgComponentContent", partial);

然后在我的基本模板中，我现在可以使用{{> sgComponentContent}}

惊人的！

于 2014-07-14T08:20:39.537 回答