如何将变量传递给 Handlebars (v1.3 with Assemble) 中的局部变量？答案

【问题标题】：How can I pass variables to a partial in Handlebars (v1.3 with Assemble)?如何将变量传递给 Handlebars (v1.3 with Assemble) 中的局部变量？
【发布时间】：2014-08-20 03:14:53
【问题描述】：

我正在使用 Assemble，它目前使用 Handlebars 1.3。在我的模板中，我使用带有Picturefill 的图片元素，它使用当前规范<picture> 语法：

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/example-xl.jpg" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/example-l.jpg" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/example-m.jpg">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/example-m.jpg" alt="An example responsive image">
</picture>

由于这部分内容可能会发生变化（例如，我可能会添加媒体查询），我希望能够轻松地在我的整个网站上更新这个 sn-p。我认为部分将是最好的。例如，像这样的：

{{> picture name="example" ext=".jpg" alt="Example image" }}

有了这个部分

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/{{name}}-xl{{ext}}" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/{{name}}-l{{ext}}" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/{{name}}-m{{ext}}">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/{{name}}-m{{ext}}" alt="{{alt}}">
</picture>

有没有办法用我的 Handlebars 版本做到这一点？我知道这是 Handlebars 2.0 中的原生版本，但不幸的是我无法将其更新到该版本，因为它已集成在 Assemble 中。或者有其他推荐的方法吗？

p.s.：我已经阅读了有关使用 {{> picture this}} here 的信息，但我不确定它是否以及如何在一页中处理多张图片（以及一个部分中的多个变量）。另外，我尝试过使用parseJSON block helper，但这种语法有点尴尬，而且比我上面描述的更冗长，所以我想知道是否有更有效的方法来做这样的事情。

【问题讨论】：

标签： javascript html handlebars.js assemble picturefill

【解决方案1】：

如果将此与 assemble 处理数据文件的方式结合起来，您可以拥有一个名为 pictures.json 或 pictures.yaml 的数据文件（取决于您要如何管理数据）。

在pictures.json:

{
  "example": {
    "name": "example",
    "ext": ".jpg",
    "alt": "Example image"
  },
  "another": {
    "name": "another",
    "ext": ".png",
    "alt": "Another example image"
  }
}

然后你的车把文件，你可以使用上面提到的语法调用部分：

{{> picture pictures.example}}
{{> picture pictures.another}}

现在picture partial 的上下文是传入的 json 对象，因此您可以通用地引用这些片段：

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="assets/img/responsive/{{name}}-xl{{ext}}" media="(min-width: 1000px)">
  <source srcset="assets/img/responsive/{{name}}-l{{ext}}" media="(min-width: 800px)">
  <source srcset="assets/img/responsive/{{name}}-m{{ext}}">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="assets/img/responsive/{{name}}-m{{ext}}" alt="{{alt}}">
</picture>

我希望这会有所帮助，直到我们将 assemble 更新为使用车把 2.0。

【讨论】：