Comment obtenir le contexte parent à partir d'un composant dans l'éclat?

Question

Disons que j'ai un composant simple lueur d'une liste des articles

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

Même si je passe dans une action du parent

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

mis à jour, template.hbs

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

dans mes component.ts extérieures

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

Ce que je suis en train de faire est d'avoir un composant avec une liste. Quand on clique sur un élément de la liste, je veux que l'événement clique en haut d'un clic, afin que le composant parent puisse décider de cacher la liste et d'afficher une vue plus détaillée de cet élément sélectionné.

Comment est-ce que je fais cela dans la lueur? Dans React je passerai

Note: Je ne suis pas en utilisant ember.js complet, à seulement glimmer.js autonome

Answer 1

par votre commentaire que vous n'avez accès à ce qui est dans le corps de la fonction, mon soupçon est que l'assistant action manquant lors de la liaison de l'action au composant enfant rend le rappel this.

Pour y remédier, lier dans comme ceci:

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

J'ai fait an example playground que vous pouvez consulter.

Answer 2

Quelque chose que j'ai appris de React, qui fonctionne également dans mon application Glimmer: vous pouvez lier vos fonctions dans le constructeur. De cette façon, quand vous les passez à différents objets, ils ne perdront pas leur contexte.

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

Maintenant, vous pouvez passer cette fonction directement que vous faisiez avant, sans utiliser l'aide supplémentaire action.

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

puis ...

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

Lorsque vous cliquez dessus, la console se connectera true car la fonction est encore appelée dans le contexte de la classe parente.