как я могу применить умножить каждый как экспресс-руль (#each)? - PullRequest
Новая
       5

как я могу применить умножить каждый как экспресс-руль (#each)?

0 голосов
/ 30 октября 2019

.Handlebars file 

 {{#each products}}
            <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
              <div class="product_block">
                <div class="product-image-container image">
                  <a href="#" class="product_img_link">
                    <img src="{{**???**= /images/product-1-1.jpg}}" alt="product-1-1" class="img-product" />
                    <span class="product-additional">
                      <img src="{{**???**= /images/product-1-2.jpg}}" alt="product-1-2-back" />
                    </span>
                  </a>

.index.js 

app.get('/collections/all', (req, res) => { res.render('collections/all', {
title: 'All Products',
products: [
  '/images/product-1-1.jpg',
  '/images/product-1-2.jpg',
  '/images/product-2-1.jpg',
  '/images/product-2-2.jpg'
] }); });

Q. Как вы можете видеть, я хочу применять как 'product-1-1' и 'product-1-2' каждый <img> Но как я могу применить каждый <img> как {#each} ??? Потому что я должен повторить <div class="col-> .. Так что трудно применить?

Извините, пожалуйста, помогите мне ~

1 Ответ

0 голосов
/ 30 октября 2019

Я думаю, вы должны изменить свои данные. По крайней мере, у вас будут возможности (динамического) цикла each вместо сравнения (статических) имен файлов. 

products: [
  {
    front: '/images/product-1-1.jpg',
    back: '/images/product-1-2.jpg',
    altFront: 'product-1-1',
    altBack: 'product-1-1-back'
  },
  {
    front: '/images/product-2-1.jpg',
    back: '/images/product-2-2.jpg',
    alt: 'product-2-1',
    altBack: 'product-2-1-back'
  },
]

{{#products}}
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
        <div class="product_block">
            <div class="product-image-container image">
                <a href="#" class="product_img_link">
                    <img src="{{front}}" alt="{{altFront}}" class="img-product" />
                    <span class="product-additional">
                        <img src="{{back}}" alt="{{altBack}}" class="img-product" />
                    </span>
                </a>
            </div>
        </div>
    </div>
{{/products}}
...