我在 web 應用程式中使用 NodeJS 和 HandlebarsJs，它回圈遍歷模擬產品的 MongoDB 集合并顯示它們的欄位。
我在“產品卡”中顯示資料（請參閱圖片），并且在遍歷集合以創建卡時，它按預期作業。但是，我有一個按鈕可以在每張卡片上打開一個模式，該模式應該顯示與該產品相關的資訊，但它不起作用。
問題是所有模式都顯示僅與 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>
uj5u.com熱心網友回復：
您的模態框需要唯一的 ID。我假設您將Bootstrap用于打開模式的功能部分。該data-target屬性應該是您要顯示的模式的唯一選擇器。
目前，您將此設定為.bd-example-modal-sm，這將打開與該選擇器匹配的第一個元素。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464166.html