Стиль флажка не переключается правильно, когда действие установлено для родителя, обновленные данные отправляются от родителя к потомку - PullRequest
Новая
       3

Стиль флажка не переключается правильно, когда действие установлено для родителя, обновленные данные отправляются от родителя к потомку

2 голосов
/ 11 февраля 2020

У меня есть компонент карты с флажком, которому родительский статус передает проверенный статус. Флажок скрыт, а метка оформлена в стиле флажка. Вся карта, содержащая флажок, имеет обработчик действий. Когда я щелкаю метку флажка или карту непосредственно, она переключается правильно, но при использовании пробела действие запускается правильно, но флажок не переключается. Я вижу, что свойство selected не задано в DOM для скрытого флажка, поэтому стиль для флажка не отображается. Я попытался сделать проверенное вычисленное свойство в компоненте карты, чтобы вызвать повторную визуализацию при обновлении проверенного значения, но безуспешно. 

<!-- parent -->
{{#each userList as |user|}}
<li {{action "selectCard" user}}>
  {{member-card
     name=user.name
     checkboxId=user.checkboxId
     checked=user.checked
  }}
</li>
<!-- child -->
<div>
  <input
    type="checkbox"
    id={{checkboxId}}
    checked={{checked}}
  />
  <label for={{checkboxId}} class="result-card__name-label">
   {{name}}
  </label>
</div>

При проверке я обнаружил, что проверенное свойство DOM не получает установить правильно. Когда я пытался: 

<!-- child -->
{{#if checked}}
<input
    type="checkbox"
    id={{checkboxId}}
    checked
  />
{{else}}
<input
    type="checkbox"
    id={{checkboxId}} />
{{/if}}

это, похоже, дает желаемый результат. Одно из решений, которое работает, - это если я также установлю тот же обработчик действия на метку флажка и предотвратю всплывающее событие при его нажатии. Но это не похоже на элегантное решение. Хотелось понять, почему чекбокс не перерисовывается правильно.

Я бы предположил, что, так как свойство selected обновляется, когда я нажимаю на карту (я проверил это с помощью ember inspector), я бы предположил, что свойство selected будет быть проверено на флажок. Но по некоторым причинам это не так, как это работает. Я закончил, но использовал предотвращение по умолчанию на метке, чтобы остановить распространение события от него до флажка, чтобы остановить его повторное инициирование события.

Ember версия: 3.8

1 Ответ

0 голосов
/ 11 февраля 2020

То, что вы показываете, должно работать. Вот Twiddle, демонстрирующий это: https://ember-twiddle.com/0631193dc09a3646ca9e9a1efe351607?numColumns=2&openFiles=controllers.application.js%2Ctemplates.application.hbs

Ваша проблема, вероятно, кроется в другом месте.

Как вы устанавливаете свойство checked для объекта user? Является ли user экземпляром EmberObject или POJO?

Если это POJO и вы выполняете user.checked = true, шаблон не будет обновляться. Ember не может знать, что свойство изменилось.

Сделайте его экземпляром EmberObject и используйте user.set(), чтобы установить его.

Или, если вы на Ember Octane (рекомендуется), user может быть экземпляром простого класса, и вы можете использовать декоратор @tracked в свойстве класса checked. Затем вы можете использовать user.checked = true для изменения состояния флажка.

...