javascript - 对于车把中的每个循环都不起作用

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>

<div class="col-md-3">当我添加时，代码从不工作{{#each products}} 没有{{#each products}}它工作，有人知道吗？

下面是数组的声明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

您无需在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>

Answer 2

你必须{{/each}}在第三个</div>（从最后一个）之前结束，也就是说，在<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>