How to update the buffered attributes from within a Glimmer Component attached to edit-topic

Dev
1

This is the old template I’m trying to elminate and move it to a Glimmer Component

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

Lower down, there is simply a this.set("location", location); which appears to exhibit two way binding.

This works fine.

Accessing the buffer with buffered provides the necessary connectivity to pass up changes to location.

The challenge comes when when using a replacement Glimmer Component:

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

Now the attribute can be updated, but it doesn’t stick, presumably as its a data down Glimmer argument.

What am I missing?

Is there an action I can access that allows me to pass up the change?

4 Likes
2

OK this is what I appear to be missing.

Exploring the Object I found a few interesting attributes, so this action becomes:

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

That seems to do it.

Almost none of that was immediately obvious.

Please let me know if there’s a better way of doing this.

4 Likes
3

There’s a more elegant way of doing this and presumably this is more standard and intended:

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