试着学习这个handlebars.js,目前我有:
<ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
"infinite": false,
"mobileFirst": true,
"slidesToShow": 5,
"slidesToScroll": 1
}'{{/gt}}>
{{#each product.images}}
<li class="productView-thumbnail">
<a
class="productView-thumbnail-link"
href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-item
data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
<img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
</a>
</li>
{{/each}}
</ul>
所以我需要一些IF语句的效果,说明是否只有1个图像(li),然后将display:none应用于类productView-thumbnailnails
如果只返回一个LI,我试图隐藏整个UL。这是否可能?
您应该只需要构建车把块。把手控件不是HTML元素,因此您可以在if语句中包含部分HTML结构。
考虑到你有一个gt-helper注册:
{{#gt product.images.length 1}}
<ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
…}'{{/gt}}>
{{/gt}}
{{#each product.images}}
{{#gt product.images.length 1}}
<li class="productView-thumbnail">
{{/gt}}
…
{{#gt product.images.length 1}}
</li>
{{/gt}}
{{/each}}
…
{{#gt product.images.length 1}}
</ul>
{{/gt}}