Assemble.io (handlebars.js) 部分上下文/变量

Question

不确定是否适合使用车把 - 我一直在网上挖掘，但没有想出太多。无论如何，我正在使用 assemble.io 并尝试设置一个部分以在我的网站周围重复。我的 /partials 目录中有一个 moduleResources.hbs。在里面我有这个代码：

 <div class="dvp-content-well">
  <div class="content-well-inner">
      <h4>Related Resources</h3>
      <ul class="fa-ul">
          <li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 3</a></li>
          <li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 1</a></li>
          <li><i class="fa-li fa fa-cog"></i><a href="#">List Item 2</a></li>
      </ul>
  </div>
</div>

该代码块可以在一个页面上调用一到两次。 基本上，我需要做的是动态更改<h4> 和<ul> 的内容。并希望在页面上调用部分时我可以这样做。所以喜欢{{> moduleResources relatedResources }}

就像在部分中包含所有 HTML，但根据上下文更改它，例如：

<div class="dvp-content-well">
  <div class="content-well-inner">
    <!-- IF Related -->
    <h4>Related Resources</h4>
    <ul class="fa-ul">
        <li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 1</a></li>
        <li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 2</a></li>
        <li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3</a></li>
    </ul>

    <!-- If Mentioned -->
    <h4>Resources Mentioned in this Article</h4>
      <ul class="fa-ul">
          <li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 1</a></li>
          <li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 2</a></li>
          <li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3/a></li>
          <li><i class="fa-li fa fa-file-o"></i><a href="#">List Item 4</a></li>
          <li><i class="fa-li fa fa-play-circle-o"></i><a href="#">List Item 5</a></li>
          <li><i class="fa-li fa fa-cog"></i><a href="#">List Item 6</a></li>
      </ul>

  </div>
</div>

我最初设置了像 resources-title: Related Resources 这样的 YAML 变量，但你可以看到我是否使用了两次该模块，并且每个版本都需要有不同的标题（和 ul 内容）......然后呢？

这甚至是车把/组装的合理使用场景吗？

谢谢！

Answer 1

我认为你的想法是正确的。您可以将不同的上下文传递给部分，并使用把手模板根据上下文填充 html。您甚至可能想将其拆分为更小的部分：

{{!list-item.hbs}}
<li><i class="fa-li fa fa-{{icon}}"></i><a href="{{url}}">{{text}}</a></li>



{{!list.hbs}}
<ul class="fa-ul">
  {{#each items}}{{> list-item . }}{{/each}}
</ul>



{{!resources.hbs}}
<div class="dvp-content-well">
  <div class="content-well-inner">
    <h4>{{title}}</h4>
    {{> list .}}
  </div>
</div>



{{!my-page.hbs}}
{{> resources resources.related}}
{{> resources resources.mentioned}}



# resources.yml
related:
  title: Related Resources
  items:
    -
      icon: file-o
      url: "#"
      text: List Item 1
    -
      icon: play-circle-o
      url: "#"
      text: List Item 2
    -
      icon: fa-cog
      url: "#"
      text: List Item 3

mentioned:
  title: Resources Mentioned in this Article
    -
      icon: file-o
      url: "#"
      text: List Item 1
    -
      icon: play-circle-o
      url: "#"
      text: List Item 2
    -
      icon: fa-cog
      url: "#"
      text: List Item 3
    -
      icon: file-o
      url: "#"
      text: List Item 4
    -
      icon: play-circle-o
      url: "#"
      text: List Item 5
    -
      icon: fa-cog
      url: "#"
      text: List Item 6