Question

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

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

Answer 1

问题已在评论中得到解答，但我在此处添加此内容以防有人发现。

当在模板中循环一个集合时，如果你在该循环中有一个动作，你必须将一些信息传递给动作处理程序，如果你期望＆＃34;当前＆＃34;动作处理程序要处理的项目，如下所示：

{{action 'openModal' product}}

以模态获取正确的数据

1 个答案: