edit-topic에 연결된 Glimmer Component 내에서 버퍼된 속성을 업데이트하는 방법

개발
1

제가 제거하려고 하고 Glimmer 컴포넌트로 이동시키려는 오래된 템플릿입니다.

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

아래쪽에는 단순히 this.set("location", location);가 있으며, 이는 양방향 바인딩을 나타내는 것으로 보입니다.

이것은 잘 작동합니다.

buffered로 버퍼에 접근하면 위치 변경을 상위 컴포넌트로 전달하는 데 필요한 연결성을 제공합니다.

도전은 대체 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 인자가 data down이기 때문에 변경 사항이 유지되지 않습니다.

무엇을 놓치고 있을까요?

변경 사항을 상위 컴포넌트로 전달할 수 있는 액션이 있을까요?

2

음, 제가 놓치고 있던 부분이 이것이었네요.

Object를 탐색해 보니 몇 가지 흥미로운 속성을 발견했고, 그래서 이 액션은 다음과 같이 변경됩니다:

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