为什么此Ember组件创建了两次？

ulmd4ohb 于 2022-11-23 发布在其他

关注(0)|答案(1)|浏览(163)

所以我只是想弄明白Ember是怎么工作的。
所以我有ComponentOne，它有propertyA（布尔值）和property2（数组），如果propertyA === true，模板将为propertyB的每个成员呈现和示例化ComponentTwo：

{{#if propertyA}}
  {{#each propertyB as |collection]}}
    {{ComponentTwo data=collection}}
  {{/each}}
{{/if}}

在处理这个问题时，我们发现ComponentTwo中的一个事件处理程序没有运行，尽管我们可以验证该事件正在触发。
通过一些明智的断点和登录到控制台，我能够确定这是按照以下顺序发生的：
1.创建ComponentTwo的示例
1.使用data的相同对象创建ComponentTwo的第二个示例。
1.销毁在步骤1中创建的第一个示例。
理论上，这会扰乱事件处理程序，因为该处理程序在ComponentTwo.init()中设置，在ComponentTwo.willDestroy()中删除。Eventer是一个单例，它会为组件的两个示例删除它。
所以我的问题是为什么Ember要创建两个示例呢？它迭代的数组只有一个成员。

ember.js

来源：https://stackoverflow.com/questions/60060316/why-is-this-ember-component-created-twice

1条答案

按热度按时间

mklgxw1f1#

您所执行的操作会导致组件重新呈现。
也许你切换了布尔属性两次。
也许你在改变或替换数组。
当数组更新时，Ember不知道哪些已经渲染的项目对应于新数组的哪个元素，所以它必须重新渲染所有内容，这将导致组件被重新示例化。
您可以使用key参数让Ember即使在数组更改时也能识别项目。
要做到这一点，数组中的每一项都需要是一个对象，例如：

propertyA: true,
propertyB: [
  {
    id: 'foo',
    collection: [], // whatever you used to have there
  },
  {
    id: 'bar',
    collection: [], // whatever you used to have there
  },
],

现在您可以使用id属性做为索引键，如下所示：

{{#if propertyA}}
  {{#each propertyB key="id" as |collection]}}
    {{ComponentTwo data=collection}}
  {{/each}}
{{/if}}

赞(0）回复(0）举报 2022-11-23

我来回答

为什么此Ember组件创建了两次？

1条答案

相关问题

热门标签

最新问答