引数に基づいてグリマーコンポーネントの初期状態を設定するにはどうすればよいですか？

私は、データを下に実装し、アクションをきらめくコンポーネント階層で上に実装する方法を理解するのに苦労しています（Ember Octane、v3.15を使用）。

アイテムのリストを持つ親コンポーネントがあります。ユーザーがParentコンポーネント内のボタンをクリックしたときに、Editor関連するアイテムのデータをコンポーネントに入力したいと思います。ユーザーがEditorコンポーネント内で[保存]をクリックすると、変更を親に戻します。代わりに次のようになります。

テキストボックスに「こんにちは」と入力し、「保存」をクリックしたときに変更を上記のリストに保持するにはどうすればよいですか？

コード

{{!-- app/components/parent.hbs --}}
<ul>
{{#each this.models as |model|}}
    <li>{{model.text}} <button {{on 'click' (fn this.edit model)}}>Edit</button></li>
{{/each}}
</ul>

<Editor @currentModel={{this.currentModel}} @save={{this.save}} />

// app/components/parent.js
import Component from '@glimmer/component';
export default class ParentComponent extends Component {
    @tracked models = [
        { id: 1, text: 'Hello'},
        { id: 2, text: 'World'}
    ]
    @tracked currentModel = null;

    @action
    edit(model) {
        this.currentModel = model;
    }

    @action
    save(model) {
        // persist data
        this.models = models.map( (m) => m.id == model.id ? model : m )
    }
}

{{!-- app/components/editor.hbs --}}
{{#if @currentModel}}
<small>Editing ID: {{this.id}}</small>
{{/if}}
<Input @value={{this.text}} />
<button {{on 'click' this.save}}>Save</button>

// app/components/editor.hbs
import Component from '@glimmer/component';
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

export default class EditorComponent extends Component {
    @tracked text;
    @tracked id;

    constructor() {
        super(...arguments)
        if (this.args.currentModel) {
            this.text = this.args.currentModel.text;
            this.id = this.args.currentModel.id;
        }

    }

    @action
    save() {
        // persist the updated model back to the parent
        this.args.save({ id: this.id, text: this.text })
    }
}

理論的根拠/問題

Editorステートフルコンポーネントとして実装することにしました<Input />。これは、コンポーネントからフォームデータを取得するための最も慣用的な方法のように思われたためです。を使用して初期状態を設定しargsます。以来はthis.currentModelある@trackedにParentComponentし、私が更新するために、そのプロパティの再割り当てを期待する@currentModelに渡される引数をEditor。

実際、次の内のいずれかの項目に「編集」をクリックするので、ケースのように思われるParentComponent可能<small>Editing ID: {{this.id}}</small>表示されます。ただし、<Input />要素の値もid入力もされません。

私はそれを理解してthis.textおり、親の変更時にofが再実行されないthis.idため、更新されていません...しかし、代わりに何をすべきかについて悩んでいます。constructorEditorComponentcurrentModel

私が試したこと

これを理解しようとしていたときに、（hbs）と（hbs、js）の間でほぼ同じ相互作用を持つこの例（コード）に出くわしました。私の問題に適用される彼らの解決策は、次のようにEditorComponentを書くことです。BlogAuthorComponentBlogAuthorEditComponent

{{!-- app/components/editor.hbs --}}
{{#if this.isEditing}}
<small>Editing ID: {{@currentModel.id}}</small>
<Input @value={{@currentModel.text}} />
<button {{on 'click' this.save}}>Save</button>
{{/if}}

// app/components/editor.hbs
import Component from '@glimmer/component';
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

export default class EditorComponent extends Component {
    get isEditing() {
        return !!this.args.currentModel
    }

    @action
    save() {
        // persist the updated model back to the parent
        this.args.save({ id: this.id, text: this.text })
    }
}

できます！子コンポーネントに渡さ何かのプロパティを変更する- ：しかし、私はいくつかの理由のため、この解決策、好きではないarg中であるため、それは（すべてで動作し、なぜそうです...不気味な...私はわからないんだけど正直ParentComponent#modelsです@tracked、その配列内のPOJOのプロパティがフォローされることは期待していません...）-これにより、入力時にテキストが更新さParentComponentれますが、これは私が望むものではありません---変更のみを永続化する必要がありますユーザーが[保存]をクリックしたとき（この場合は何もしません）-私の実際のアプリでは、ユーザーが既存のアイテムを「編集」していないときに、フォームを「アイテムの追加」フォームにします。 「保存」ボタンは新しいアイテムを追加します。私'<Input @value

私もこの質問に出くわしましたが、それは古いバージョンのグリマーを参照しているようです。

ここまで読んでいただきありがとうございます---アドバイスをいただければ幸いです。