Почему этот компонент Ember создан дважды? - PullRequest
Новая
       5

Почему этот компонент Ember создан дважды?

1 голос
/ 04 февраля 2020

Так что на самом деле я просто пытаюсь расшифровать, как здесь работает Эмбер.

Итак, у меня есть ComponentOne. Который имеет propertyA (логическое) и property2 (массив). Если propertyA === true, шаблон будет отображаться и создавать экземпляр ComponentTwo для каждого члена propertyB: 

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

При работе с этим мы обнаружили проблему, когда обработчик событий в ComponentTwo не работал, даже если мы мог убедиться, что событие стреляло. Это происходило в ситуации, когда propertyA === true и propertyB.length === 1.

Через некоторые разумные точки останова и ведение журнала на консоль я смог определить, что это происходит в такой последовательности:

  1. создается экземпляр ComponentTwo
  2. Создается второй экземпляр ComponentTwo с использованием того же объекта для data.
  3. Первый экземпляр, созданный на шаге 1, уничтожается.

Теория состоит в том, что это портит обработчик событий, потому что этот обработчик был установлен в ComponentTwo.init() и удален в ComponentTwo.willDestroy(). Даже будучи одноэлементным, он удаляет его для обоих экземпляров компонента.

Итак, мой вопрос: зачем Ember вообще создавать два экземпляра? Есть только один член массива, который он повторяет.

1 Ответ

1 голос
/ 05 февраля 2020

Вы делаете что-то, что вызывает повторную визуализацию компонента.

Возможно, вы переключаете логическое свойство дважды.

Возможно, вы изменяете или заменяете массив.

Когда массив обновляется, 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}}
...