当Emnber octane中的参数发生变化时如何触发组件内部的函数

Question

所以我在控制器中有一个这样的父元素

import Controller from '@ember/controller';

export default class IndexController extends Controller {
@service firebaseApp;
@service fastboot;
@tracked user =false;

async init(){
 super.init(...arguments);
 if (!this.fastboot.isFastBoot){
  const auth =  await this.firebaseApp.auth();
  auth.onAuthStateChanged((user)=>{
     if(user){
       this.user = true
     } else {
       this.user = false
     }
      })
     }
   }

然后将组件loadData称为

问题是，当@ loadData改变时，如何在组件user内部执行函数？

Answer 1

Ember Octane原语还不能很好地支持参数更改时触发操作。一种常见的方法是使用@ember/render-modifiers或ember-render-helpers。

@ember/render-modifiers提供了一个{{did-update}}修饰符。ember-render-helpers提供了一个{{did-update}}助手。修饰符和帮助器，除了作为第一个位置参数的函数。每当其他位置参数发生变化时，就会执行该函数。

当执行的函数需要访问DOM元素时，{{did-update}}修饰符很有用。它在调用时将附加到的DOM元素设置为函数的参数。

当执行的函数不需要访问DOM元素时，{{did-update}}帮助器非常有用。

{{! A Glimmer template }}

{{! did-update helper }}
{{did-update this.loadData @user}}

{{! did-update modifier }}
<div class="loading" {{did-update this.showLoadingSpinner @user}} />

{{did-update}}修饰符的主要用例是简化从经典@ember/component到@glimmer/component的迁移。在几乎所有情况下，包含应该执行的逻辑的特定修饰符本身都是更好的解决方案。它提供了更好的可重用性，可以单独测试，并且对使用它的组件有明确的边界。

Ember helper的主要用例是填补当前{{did-update}} model编程模型中的空白。由于自动跟踪和原生getter，Ember Octance为派生状态提供了令人惊叹的开发人员体验。它为根据值修改DOM元素提供了很好的体验。但它还没有很好的原语，可以在参数改变时触发数据加载之类的操作。

社区目前正在尝试不同的方法来填补这一空白。它似乎选择了Chris Garret (pzuraq)在an RFC和in a recent blog post中提出的@use装饰器和资源。它可以作为ember-could-get-used-to-this包的一部分用于实验。

ember-render-helpers提供的{{did-update}}帮助器是填补这一空白的最成熟的解决方案，直到类似资源的东西在Ember中稳定下来。