edit-topic にアタッチされた Glimmerコンポーネント内で、バッファリングされた属性を更新する方法

[merefield (Robert)]

これは、私が排除して 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 引数であるため、保持されません。

何が足りないのでしょうか？

変更を上に渡すことができるアクションはありますか？

[merefield (Robert)]

OK、これが不足しているもののようです。

オブジェクトを調べたところ、興味深い属性がいくつか見つかったため、このアクションは次のようになります。

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

これでうまくいったようです。

そのほとんどはすぐに明らかではありませんでした。

これより良い方法があれば教えてください。

[merefield (Robert)]

もっとエレガントな方法があり、おそらくこちらの方が標準的で意図された方法でしょう。

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