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

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

你必须在第 3 个 </div>（从最后一个）之前结束 {{/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>

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

for each loop in handlebars is not working

html

javascript

node.js

handlebars.js

hbs