为什么每次进入路线时组件都会自我复制？

Question

我正在开发我的第一个余烬应用程序，但遇到组件问题。我有一条路线可以加载多个组件。每个都加载以下范例：

{{#each someList as |item|}}

<MyComponent @item={{item}} />

{{/each

进入路线时效果很好。但是，每次我离开页面并返回而没有刷新时，其中一个组件将再次呈现。

我是Ember的新手。我尝试使用组件生命周期挂钩来强制重新渲染，但没有成功。我也尝试设置一个变量来检查容器是否已经加载，但是在离开页面时会重置。

无法运作：

{{#each this.weapons as |weapon|}}

    <CharacterWeaponDetail @weapon={{weapon}} />

{{/each}}

在职的：

{{#each (this.skills) as |skill| }}

    <SkillDetail

    @skill={{skill}} 

    @character={{charactersheet}} 

    @chrSkills={{chrSkills}} 

    @charParam={{charactersheet.id}} 

    @action="filter"

    @unUsedSP={{this.unUsedSP}}

    @realtimeSkillPoints={{realtimeSkillPoints}}

    @filter={{charactersheet.profession.name}}/> 

{{/each}} 

说每个组件加载两次。第一次渲染时，结果如下所示：

<CharacterWeaponDetail />

<CharacterWeaponDetail />

<SkillDetail />

<SkillDetail />

这是预期的行为。但是，如果我使用{{link-to}}离开路线而没有完全刷新就返回，结果将如下所示：

<CharacterWeaponDetail />

<CharacterWeaponDetail />

<CharacterWeaponDetail />

<CharacterWeaponDetail />

<SkillDetail />

<SkillDetail />

每次页面加载<CharacterWeaponDetail />将再次重复。我该如何阻止这种情况的发生。

Answer 1

model()每次输入路线时，都会执行路线的挂钩。您将Weapon在每次执行中创建新的。这些Weapon对象被推到weapons路线的属性。路由是ember.js中的单例。在每次重新进入路由时，都会将更多Weapon对象推送到weapons属性。您可以通过不将weaponsas存储为route的属性来解决错误，而在每次model()执行挂钩时都初始化一个新数组。您应该在model钩子中替换此代码for (let i = 0; i < characterWeapons.length; i++) {&nbsp; let weapon = Weapon.create();&nbsp; let weapons = this.get('weapons');&nbsp; // ...&nbsp; weapons.push(weapon);}和let weapons = [];for (let i = 0; i < characterWeapons.length; i++) {&nbsp; let weapon = Weapon.create();&nbsp; // ...&nbsp; weapons.push(weapon);}您根本不需要weapons在路线上存储。而且，您不应该确定每次循环for循环时都应替换该属性。