Wie bekomme ich den übergeordneten Kontext aus einer Komponente in glimmer?

Question

Lassen Sie uns sagen, dass ich eine einfache Komponente in Schimmer haben mit einer Liste von Elementen

<todo-list @items={{ items }}></todo-list> 

template.hbs

<ul> 
    {{#each @items key="@index" as |item|}} 
    <li onclick={{ action clickme }}>{{ item }}</li> 
    {{/each}} 
</ul> 

component.ts

import Component, { tracked } from '@glimmer/component'; 

export default class TodoList extends Component { 
    constructor(options) { 
    super(options); 
    } 
    clickme() { 
    // how do I access the parent context from here? 
    } 
} 

Auch wenn ich in einer Aktion übergeben vom Elternteil

<todo-list @items={{ items }} @rootclickme={{ rootclickme }}></todo-list> 

aktualisiert, template.hbs

<ul> 
    {{#each @items key="@index" as |item|}} 
    <li onclick={{ action @rootclickme }}>{{ item }}</li> 
    {{/each}} 
</ul> 

in meinem äußeren component.ts

rootclickme() { 
    // I don't have access to parent variables here either? 
    // only what's within the scope of the function itself?   
} 

Was ich versuche, eine Komponente mit einer Liste zu tun ist, haben. Wenn auf ein Listenelement geklickt wird, möchte ich, dass ein Klickereignis nach oben geleitet wird, sodass die übergeordnete Komponente entscheiden kann, die Liste auszublenden und eine detailliertere Ansicht für dieses ausgewählte Element anzuzeigen.

Wie mache ich das im Glimmer? In reagiere ich vorbei würde

Hinweis: Ich bin nicht voll Ember.js verwenden, glimmer.js nur Standalone

Answer 1

von Ihrem Kommentar, dass Sie nur den Zugang haben, was in der Funktion Körper, mein Der Verdacht besteht darin, dass der fehlende Helfer action beim Binden der Aktion an die untergeordnete Komponente dazu führt, dass der Rückruf seine this verliert.

es anzusprechen, binden es wie folgt in:

<todo-list @items={{ items }} @rootclickme={{action rootclickme}}></todo-list> 

ich an example playground gemacht haben, dass Sie überprüfen können.

Answer 2

Etwas, was ich von React gelernt habe, das funktioniert auch in meiner Glimmer-App: Sie können Ihre Funktionen im Konstruktor binden. Auf diese Weise verlieren sie ihren Kontext nicht, wenn Sie sie an verschiedene Objekte weitergeben.

export default class WhateverRootComponent extends Component { 
    constructor(options) { 
    super(options); 
    this.rootClickMe = this.rootClickMe.bind(this) 
    } 
    rootClickMe() { 
    console.log(this instanceof WhateverRootComponent) 
    } 
} 

Jetzt können Sie diese Funktion übergeben in direkt, wie Sie, bevor Sie wurden, ohne die zusätzlichen action Helfer verwendet.

<!-- WhateverRootComponent template --> 
<SomeChild @actionToTake={{ rootClickMe }} /> 

dann ...

<!-- SomeChild template --> 
<button onclick={{ action @actionToTake }}> Click Me </button> 

Wenn Sie darauf klicken, wird der Computer true anmelden, da die Funktion noch in der übergeordneten Klasse Kontext aufgerufen wird.