如何从 glimmer 组件中获取 parent 上下文？

Question

假设我有一个带有项目列表的简单组件

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

即使我从 parent

传递一个动作

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

已更新，template.hbs

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

在我的外层component.ts

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

我想要做的是拥有一个带有列表的组件。单击列表项时，我希望它在顶部弹出一个单击事件，以便 parent 组件可以决定隐藏列表并显示该选定项的更详细视图。

我该如何在 glimmer 中执行此操作？作为反应，我会通过

注意：我没有使用完整的 ember.js，只是 glimmer.js 独立的

Answer 1

根据您的评论，您只能访问函数主体中的内容，我怀疑是在将操作绑定到子组件时缺少 action 帮助程序导致回调失去其 this.

要解决它，请像这样绑定它：

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

我做了an example playground，你可以看看。

Answer 2

我从 React 中学到的东西，也适用于我的 Glimmer 应用程序：您可以在构造函数中绑定您的函数。这样，当您将它们传递给不同的对象时，它们就不会丢失它们的上下文。

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

现在您可以像以前一样直接传递该函数，而无需使用额外的 action 助手。

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

然后...

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

单击时，控制台将记录 true，因为该函数仍在父 class 的上下文中调用。

如何从 glimmer 组件中获取 parent 上下文？

How do I get the parent context from within a component in glimmer?

javascript

components

glimmer.js