Handlebars.js и скрыть, если список
Пытаюсь изучить этот 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, который указывает, что есть только одно изображение (li), а затем применить display:none к классу productView-thumbnails
Я пытаюсь скрыть весь UL, если возвращается только один LI. Возможно ли это вообще?
в этом идея, UL — это место для миниатюр под основным изображением продукта, я не хочу показывать миниатюры, если есть только одна.
А вы уже определили этот gt-helper или это псевдокод?
Ответы 1
Вам нужно только структурировать блоки руля. Элементы управления рулем не являются элементами HTML, поэтому вы можете обернуть частичную структуру HTML в операторы if.
Учитывая, что у вас есть зарегистрированный 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}}
этот код уже был в платформе, я даже понятия не имею, что такое GT... руль для меня совершенно новый, но обертывание его новым тегом GT с этим 1 полностью работает! Спасибо. Очевидно, мне нужно больше узнать об этом
Рад, что это помогло. Существует пакет npm, который предоставляет 130 хелперов, среди них {{gt}} — может быть, он у вас установлен?
не уверен? У меня есть BigCommerce, и мне приходится работать с тем, с чем он пришел. Я запросил список «помощников», но ничего не смог получить.
Если вы скроете элемент с помощью CSS, весь контент также будет скрыт — вы действительно этого хотите? Или будет уместно избегать UL и LI? Это сохранит ваш DOM правильным.