每个循环都不起作用。

Question

<section>
    <div class="container mt-5">
        <div class="row">
            {{#each products}}
            <div class="col-md-3">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top"
                        src="{{this.image}}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">{{this.name}}</h5>
                        <p class="card-text">{{this.description}}</p>
                        <a href="#" class="btn btn-primary">Add to Cart</a>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
</section>

当我在没有{{#each products}}的情况下添加{{#each products}}时，从<div class="col-md-3">开始的代码不起作用，有人知道这一点吗？

下面是数组products的声明。

router.get('/', function(req, res, next) {
  let products=[
    {
      name: "iPhone 11",
      category: "Mobile",
      description: "Example",
      image: "https://www.apple.com/v/iphone-11/e/images/meta/og__f2jtwncwsl2e_specs.png"
    },
    {
      name: "OnePlus 9 Pro",
      category: "Mobile",
      description: "Example",
      image: "https://www.notebookcheck.net/uploads/tx_nbc2/4_zu_3_OnePlus_9_Pro.jpg"
    }
  ]
  res.render('index', {products});
});

当我运行{{log this}}时，它给了我这个-

{
  settings: {
    'x-powered-by': true,
    etag: 'weak',
    'etag fn': [Function: generateETag],
    env: 'development',
    'query parser': 'extended',
    'query parser fn': [Function: parseExtendedQueryString],
    'subdomain offset': 2,
    'trust proxy': false,
    'trust proxy fn': [Function: trustNone],
    view: [Function: View],
    views: 'My File Name',
    'jsonp callback name': 'callback',
    'view engine': 'hbs',
    port: 3000
  },
  products: [
    {
      name: 'iPhone 11',
      category: 'Mobile',
      description: 'This is a good phone',
      image: 'https://www.apple.com/v/iphone-11/e/images/meta/og__f2jtwncwsl2e_specs.png'
    },
    {
      name: 'OnePlus 9 Pro',
      category: 'Mobile',
      description: 'This is a good phone',
      image: 'https://www.notebookcheck.net/uploads/tx_nbc2/4_zu_3_OnePlus_9_Pro.jpg'
    }
  ],
  _locals: [Object: null prototype] {},
  cache: false
}

Answer 1

您必须在第三个{{/each}}之前(从最后一个)结束，即在<div class="row"之后启动{{#each products}}，所以我必须在它的结束标记之前结束它。下面是修正后的代码。

<section>
    <div class="container mt-5">
        <div class="row">
            {{#each products}}
            <div class="col-md-3">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top"
                        src="{{this.image}}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">{{this.name}}</h5>
                        <p class="card-text">{{this.description}}</p>
                        <a href="#" class="btn btn-primary">Add to Cart</a>
                    </div>
                </div>
            {{/each}}
            </div>
        </div>
    </div>
</section>

Answer 2

您不需要在这里使用this，只需提及对象的属性名就可以完成这项工作。

<section>
    <div class="container mt-5">
        <div class="row">
            {{#each products}}
            <div class="col-md-3">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top"
                        src="{{image}}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">{{name}}</h5>
                        <p class="card-text">{{description}}</p>
                        <a href="#" class="btn btn-primary">Add to Cart</a>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
</section>