Как обновить буферизированные атрибуты из компонента Glimmer, подключенного к edit-topic

Разработка
1

Это старый шаблон, который я пытаюсь устранить и перенести в компонент Glimmer.

{{#if model.showLocationControls}}
  {{add-location-controls
    location=buffered.location
    categoryId=buffered.category.id
  }}
{{/if}}

Ниже просто вызывается this.set("location", location);, что, похоже, обеспечивает двустороннее связывание.

Это работает корректно.

Доступ к буферу через buffered обеспечивает необходимую связь для передачи изменений свойства location наверх.

Проблема возникает при использовании заменяющего компонента Glimmer:

export default class EditLocationDetails extends Component {

  @action
  updateLocation(location) {
    this.args.outletArgs.buffered.location = location;
  }

  <template>
    {{#if this.args.outletArgs.model.showLocationControls}}
      <AddLocationControls
        @location={{this.args.outletArgs.buffered.location}}
        @category={{this.args.outletArgs.buffered.category}}
        @updateLocation={{this.updateLocation}}
      />
    {{/if}} 
  </template>
}

Теперь атрибут можно обновить, но изменения не сохраняются, вероятно, потому что это аргумент Glimmer с передачей данных сверху вниз.

Чего мне не хватает?

Существует ли какое-то действие, к которому я могу обратиться, чтобы передать изменения наверх?

2

Хорошо, вот что, похоже, я упускал.

Изучив объект, я нашёл несколько интересных атрибутов, поэтому действие выглядит так:

  @action
  updateLocation(location) {
    this.args.outletArgs.buffered.buffer = {
      location: location
    }
    this.args.outletArgs.buffered.hasBufferedChanges = true;
  }

Кажется, это решает проблему.

Почти ничего из этого не было очевидно с первого взгляда.

Пожалуйста, дайте знать, если есть более лучший способ сделать это.

3

Существует более элегантный способ сделать это, и, по всей видимости, это более стандартный и правильный подход:

  @action
  updateLocation(location) {
    set(this.args.outletArgs.buffered, "location", location);
    this.location = location;
  }