以模态获取正确的数据



我试图在模板中两次访问数据,一次在列表视图中,一次在模态视图中。单击图像后,模态将显示许多相同的数据,只是被炸毁。我有问题。即使每个语句都嵌套在每个语句中,模态似乎正在采用最后一组数据。有任何想法吗?这是我的代码...

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

最新更新