Como atualizar os atributos em buffer de dentro de um Glimmer Component vinculado a editar-tópico

Dev
1

Este é o template antigo que estou tentando eliminar e mover para um Glimmer Component

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

Mais abaixo, há simplesmente um this.set("location", location); que parece exibir binding bidirecional.

Isso funciona bem.

Acessar o buffer com buffered fornece a conectividade necessária para passar as alterações de localização para cima.

O desafio surge ao usar um Glimmer Component de substituição:

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>
}

Agora o atributo pode ser atualizado, mas ele não permanece, presumivelmente porque é um argumento Glimmer de dados para baixo.

O que estou perdendo?

Existe uma ação que posso acessar que me permite passar a mudança para cima?

2

OK, parece que é isso que está faltando.

Explorando o Objeto, encontrei alguns atributos interessantes, então esta ação se torna:

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

Isso parece resolver.

Quase nada disso foi imediatamente óbvio.

Por favor, me avise se houver uma maneira melhor de fazer isso.

3

Há uma maneira mais elegante de fazer isso e, presumivelmente, esta é mais padrão e pretendida:

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