Comment mettre à jour les attributs tamponnés depuis un Composant Glimmer attaché à edit-topic

Dev
1

Voici l’ancien modèle que j’essaie d’éliminer et de déplacer vers un composant Glimmer

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

Plus bas, il y a simplement un this.set("location", location); qui semble présenter une liaison bidirectionnelle.

Cela fonctionne bien.

Accéder au buffer avec buffered fournit la connectivité nécessaire pour remonter les changements de localisation.

Le défi survient lors de l’utilisation d’un composant Glimmer de remplacement :

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

Maintenant, l’attribut peut être mis à jour, mais il ne reste pas, probablement parce que c’est un argument Glimmer de type “data down”.

Qu’est-ce qui me manque ?

Existe-t-il une action à laquelle je peux accéder qui me permet de remonter le changement ?

4 « J'aime »
2

OK, voici ce qui semble me manquer.

En explorant l’objet, j’ai trouvé quelques attributs intéressants, donc cette action devient :

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

Cela semble fonctionner.

Presque rien de tout cela n’était immédiatement évident.

Veuillez me faire savoir s’il existe une meilleure façon de procéder.

4 « J'aime »
3

Il existe une manière plus élégante de faire cela et c’est probablement plus standard et prévu :

  @action
  updateLocation(location) {
    set(this.args.outletArgs.buffered, "location", location);
    this.location = location;
  }
3 « J'aime »
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.