在IF条件下访问车把中的特定阵列项目

Question

我第一次使用车把，找不到任何答案。

我有一个手柄对象：{{product.options}}，它输出特定产品的活动样本数。

因此，如果我有3个色样，{{product.options}}的输出将是[object object]、[object object][object object]。

我试图实现的是，针对每个色样输出，并为其分配一个唯一的源媒体元素。因此，在用户单击特定的色样后，将加载该色样的代表性缩略图。

现在，默认情况下，这是在每个SKU的产品面板中完成的，但您只能上传一张图像。我需要这样做，因为我想有不同的图像移动和桌面上的所有样本。

到目前为止，我得到了这个代码

{{#if product.options}}
<source media="(min-width: 768px)"
srcset="{{getImage ../product.images.[6] (cdn theme_settings.default_image_product)}}">
<source media="(min-width: 768px)"
srcset="{{getImage ../product.images.[7] (cdn theme_settings.default_image_product)}}">
{{/if}}

它加载了桌面的替代图像，但我不知道如何将它们指定给特定的色样。我曾尝试使用{{#if @index '===' 0}}等来指定不同的场景，但都没有成功。

这是整个图片类

<picture class="productLayout-one-picture fullwidth-image-container productView-image is-ready" data-image-gallery-main>
{{#if product.options}}
<source media="(min-width: 768px)"
srcset="{{getImage ../product.images.[6] (cdn theme_settings.default_image_product)}}">
<source media="(min-width: 768px)"
srcset="{{getImage ../product.images.[7] (cdn theme_settings.default_image_product)}}">
{{/if}}
<img class="productView-image--default fullwidth-image"
data-sizes="auto"
src="{{getImage product.main_image (cdn theme_settings.default_image_product)}}"
alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image >
</picture>

当点击不同的样例时，"默认"缩略图会正确切换，这是bigcommerce基石主题的基本功能，但我不知道如何复制这些条件。

Answer 1

您可以使用#each和#if_eq助手的组合进行比较。

{{#if product.options}}
{{#each product.options}}
{{#if_else index compare=0 }}
// .. do something specific
{{/if_else}}
{{/each}}
{{/if}}

if_eq.js

export default function(context, options) {
var compare = options.hash.compare;
if(compare && context) {
compare = compare.toString();
context = context.toString()
}
if (context === compare) {
return options.fn(this);
}
return options.inverse(this);
};