在IF条件中访问车把中的特定数组项目。

Question

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

我有一个handlebars对象。{{product.options}}它输出了一个特定产品的活动色板数量。

所以，如果我有3个颜色的色板，那么输出的结果是 {{product.options}} 会是[对象对象]、[对象对象]、[对象对象]。

我试图实现的是，针对每一个色板输出，并为其分配一个独特的源媒体元素，所以当用户点击一个特定的色板后，将加载该色板的代表性缩略图。

现在，这是在产品的面板中为每个单独的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>

'默认'的缩略图在点击不同的swatch时正确切换，这是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);
};