Bootstrap 模式仅显示 MongoDB 集合中的第一条记录

Question

我正在使用 NodeJS、Handlebars 和 Bootstrap 构建一个简单的 Web 应用程序。它应该循环遍历模拟产品的 MongoDB 集合并显示其字段。

我正在“产品卡”中显示数据（请参阅）。然而，当循环遍历集合以创建卡片时，它可以很好地读取每个产品，我有一个按钮可以在每张卡片上打开一个模式 - 它应该显示与该产品相关的信息，这不起作用。

问题是所有模态显示仅与 MongoDB 集合中的第一个索引相关的信息。

这是我显示产品的 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 作为打开模式的功能部分。

data-target

属性应该是您想要显示的模式的唯一选择器。

目前，您已将其设置为

.bd-example-modal-sm

，这将打开与该选择器匹配的 first 元素。

如果您的

Product

数组没有唯一 ID，您可以使用特殊变量名称

@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>