Handlebarsjs #each 模态仅显示第一个元素

Question

我在网络应用程序中使用 NodeJS 和 HandlebarsJs，它循环遍历 MongoDB 模拟产品集合并显示它们的字段。

我在“产品卡片”中显示数据（参考 image），当循环遍历集合以创建卡片时，它按预期工作 .但是我有一个按钮可以在每张卡片上打开一个模式，它应该显示与该产品相关的信息，这是行不通的。

问题是所有模态显示的信息仅与 MongoDB 集合中的第一个索引相关。在图像中，您会注意到产品卡仍在成功读取，因为它们没有重复。

我已经尝试重新安排#each 循环的位置和关闭，并为模态添加一个单独的#each 循环，但是当在模态中使用单独的#each 循环时，它会循环遍历每个产品这是不需要的（应该只是点击的产品）。

这是我的 HTML 代码来显示产品：

<div class="products">
  <h1>Featured Products</h1>
  <section class="product-list">
    <div class="product-container">
      {{#each Product}}
        <div class="card">
          <div class="title">{{this.name}}</div>
          <div class="image">
            <img src="https://source.unsplash.com/random/50×50/?fruit" />
          </div>
          <div class="cost">{{this.cost}}</div>
          <div>
            <button class="buy-button">Add to cart</button>
            <button
              class="buy-button"
              data-toggle="modal"
              data-target=".bd-example-modal-sm"
            >More Detail</button>
          </div>
        </div>

        <!-- modal -->
        <div
          class="modal fade bd-example-modal-sm"
          data-toggle="modal"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-md">
            <div class="modal-content">
              <div class="carousel" data-ride="carousel">
                <div class="parentSlider">
                  <div class="parentSlider-cell">
                    <img
                      class="img"
                      src="https://source.unsplash.com/random/50×50/?fruit"
                    />
                  </div>
                  <div class="product-detail-text">
                    <p>Name: {{this.name}}</p>
                    <p>Price: {{this.cost}}</p>
                    <p>Description: {{this.description}}</p>
                  </div>
                </div>
              </div>
              
              <div class="modal-footer">
                <button class="buy-button" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      {{/each}}
    </div>
  </section>
</div>

Answer 1

您的模态框需要唯一的 ID。我假设您使用的 Bootstrap for the functional part of opening the modals. The data-target attribute 应该是您要显示的模态的唯一选择器。

目前，您已将此设置为 .bd-example-modal-sm，这将打开与该选择器匹配的 第一个 元素。

如果您的 Product 数组没有唯一 ID，请 you can use the the special variable name @index 获取您正在循环的当前项目的索引。如果 Product 是一个对象，那么你可以使用 @key.

这是一个包含产品数组的简单示例：

const template_source = document.getElementById('template-source').innerHTML;
const template = Handlebars.compile(template_source);

const compiled_html = template({
  Product: [
    {
      name: 'Apples',
      cost: '1.00',
      description: 'Apples can be red or green.',
    },
    {
      name: 'Bananas',
      cost: '2.00',
      description: 'Bananas are usually yellow, but sometimes green or brown.',
    },
    {
      name: 'Coconuts',
      cost: '3.00',
      description: 'Coconuts when pealed are usually tan or brown.',
    },
  ]
});

const app = document.getElementById('app');
app.innerHTML = compiled_html;

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css');


/* misc */
.product-container {
  display: flex;
  flex-wrap: wrap;
}

.card,
.modal {
  padding: 0.5em;
  margin: 0.5em;
}

.card {
  background: gainsboro;
}

.modal {
  background: beige;
  max-width: 300px;
  max-height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>

<script id="template-source" type="text/x-handlebars-template">
   <div class="product-container">
     {{#each Product}}
       <div class="card">
         <p>Name: {{this.name}}</p>
         <p>Cost: {{this.cost}}</p>
         <button
           data-toggle="modal"
           data-target="#product-modal-{{@index}}"
         >
           More Detail
         </button>
       </div>
       
       <!-- modal -->
       <div
         id="product-modal-{{@index}}"
         class="modal"
         data-toggle="modal"
         aria-hidden="true"
       >
         <p>Name: {{this.name}}</p>
         <p>Cost: {{this.cost}}</p>
         <p>Description: {{this.description}}</p>
         <button data-bs-dismiss="modal" data-dismiss="modal">Close</button>
       </div>
     {{/each}}
   </div>
</script>

<div id="app"></div>

Handlebarsjs #each 模态仅显示第一个元素

Handlebarsjs #each modal displaying only first element

twitter-bootstrap

handlebars.js