0

カスタム ハンドルバー ヘルパーを作成しようとしていますが、「ベース テンプレート」と「部分」を渡すことができるようにしたいと考えています。

したがって、基本テンプレートをレンダリングしてから、2 番目のパラメーターとして渡されたパーシャルをレンダリングする必要があります。

私は今、次のものを持っています：

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