我试图在模板中两次访问数据,一次在列表视图中,一次在模态视图中。单击图像后,模态将显示许多相同的数据,只是被炸毁。我有问题。即使每个语句都嵌套在每个语句中,模态似乎正在采用最后一组数据。有任何想法吗?这是我的代码...
<div class="row">
{{#each model.products as |product|}}
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="shopify-grid-wrapper">
<div id="#image-wrapper" class="image-wrapper" {{action 'openModal'}}>
<div class="img-overlay">
<p>
Click for More Details
</p>
</div>
{{#each product.images as |image|}}
<img src= {{image.src}} />
{{/each}}
</div>
<div class="description-wrapper">
<span><p>{{product.title}}</p></span>
<p>
{{product.productType}}
</p>
<p>
{{product.tags}}
</p>
</div>
</div>
</div>
{{#if shopifyModal}}
{{#liquid-wormhole class="fullscreen-modal" }}
<div class="left-side">
{{selectedProduct.title}}
</div>
<div class="right-side">
{{buy-button product=product.attrs open="openCart"}}
<div class="Cart {{if model.isCartOpen "Cart--open"}}">
{{shopify-cart close="closeCart"}}
</div>
<p {{action 'closeModal'}}>
Close
</p>
</div>
{{/liquid-wormhole}}
{{/if}}
{{/each}}
</div>
在评论中回答了问题,但是我在这里添加了此问题,以防万一有人找到它。
在模板中循环浏览集合时,如果您在该循环内有操作,则必须将一些信息传递给操作处理程序,如果您期望操作处理程序处理"当前"项目,则必须将其传递给操作处理程序:
{{action 'openModal' product}}