问Ember组件泄漏状态

EN

我是Ember的新手，有一个泄露状态的问题。我有一个carousel小部件，它一次显示一个项目，并允许用户单击上一个/下一个来查看每个项目。

下面是简化的carousel组件：

<button {{action "nextItem"}}>Next</button>
{{carousel-item item=selectedItem}}

单击next会更改selectedItem属性，以便显示下一项。

我意识到，并不是每次我移动到上一项/下一项时，carousel-item组件都会重新初始化。DOM每次都会被重用，组件的属性也是共享的，因为它都是一个实例，这意味着我可能会有泄漏状态。

我看到的另一种选择是最初呈现所有项，这样每个项都有自己的实例：

{{#each items as |item|}}
  {{carousel-item item=item}}
{{/each}}

并使用CSS隐藏除所选项目之外的所有项目。然而，这个选项有点像jQuery黑客--似乎Ember有更好的方法。而且我一次只显示一个项目，所以我讨厌在不需要的时候有这么多额外的DOM节点。

如果一次只需要显示一个项目，但又不想在项目之间共享状态，那么处理这种UI的推荐方式是什么？我想我应该为每个项目都有一个carousel-item组件的实例，而不是在所有项目之间共享一个实例。但是一开始实例化每一个carousel-item也是不对的。我不能想象Ember的方式是自己过多地担心DOM的细节(根据一个类和一些CSS来决定显示/隐藏哪一个)。