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

即使我从父母传递了一个动作

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

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

我如何在微光中做到这一点？在反应中，我正在通过

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

Answer 1

根据您的评论，您只能访问函数体中的内容，我怀疑在将操作绑定到子组件时缺少action帮助程序会使回调失去其{{ 1}}。

要解决它，请将其绑定为：

this

我已经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，因为该功能仍在父类的上下文中调用。

如何从微光中的组件中获取父上下文？

2 个答案: