Come aggiornare gli attributi bufferizzati all'interno di un componente Glimmer collegato a edit-topic

[merefield (Robert)]

Questo è il vecchio template che sto cercando di eliminare e spostare in un Glimmer Component

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

Più in basso, c’è semplicemente un this.set("location", location); che sembra esibire un binding a due vie.

Questo funziona bene.

Accedere al buffer con buffered fornisce la connettività necessaria per passare le modifiche alla posizione.

La sfida sorge quando si utilizza un Glimmer Component sostitutivo:

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

Ora l’attributo può essere aggiornato, ma non rimane, presumibilmente perché è un argomento Glimmer data down.

Cosa mi sto perdendo?

C’è un’azione a cui posso accedere che mi permette di passare la modifica?

[merefield (Robert)]

OK, sembra che mi manchi questo.

Esplorando l’oggetto ho trovato alcuni attributi interessanti, quindi questa azione diventa:

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

Sembra che funzioni.

Quasi nulla di tutto ciò era immediatamente ovvio.

Per favore, fammi sapere se c’è un modo migliore per farlo.

[merefield (Robert)]

C’è un modo più elegante per farlo e presumibilmente questo è più standard e intenzionale:

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