Question

我正在使用目前使用Handlebars 1.3的Assemble。在我的模板中，我使用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>

由于部分内容可能会发生变化（例如我可能会添加媒体查询），因此我希望能够轻松地在整个网站上更新此代码段。我认为偏爱是最好的。例如，像：

{{> 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中。或者还有其他推荐的方法吗？

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

Answer 1

如果将此与汇编处理数据文件的方式结合使用，您可以拥有一个名为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部分上下文是传入的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>

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

如何将变量传递给Handlebars中的部分变量（带汇编的v1.3）？

1 个答案: