当 Emnber 辛烷值发生变化时如何触发组件内部的函数

Question

so i have a parent in controller like this

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

then call a component loadData like this <LoadData @user={{this.user}}/>

the question is how to execute a function inside component loadData when @user change?

Answer 1

Triggering an action when an argument changes is not that well supported by Ember Octane primitives yet. A common approach is to use either @ember/render-modifiers or ember-render-helpers .

@ember/render-modifiers provide a {{did-update}} modifier . ember-render-helpers provide a {{did-update}} helper . Both the modifier and the helper except a function as first position argument. That function is executed whenever one of the other positional arguments changes.

{{did-update}} modifier is helpful when the function executed needs access to a DOM element. It sets the DOM element, which it is attached to, as an argument on the function when called.

{{did-update}} helper is helpful when the function executed does not need access to a DOM element.

{{! A Glimmer template }}

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

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

The main use case for {{did-update}} modifier is to ease the migration from classical @ember/component to @glimmer/component . In nearly all cases a specific modifier containing the logic, which should be executed, itself is a better solution. It provides better reusability, can be tested in isolation and has clear boundaries to the components in which it is used.

The main use case for {{did-update}} helper is to fill a gap in current Ember Octance programming model. Ember Octance provides an awesome developer experience for derived state thanks to autotracking and native getters. It provides a great experience to modify a DOM element depending on a value. But it does not have great primitives yet to trigger actions like data loading when an argument changes.

The community current experiments with different approaches to fill that gap. It seems to settle on @use decorator and resources as proposed by Chris Garret (pzuraq) in an RFC and in a recent blog post . It's available for experiments as part of ember-could-get-used-to-this package.

The {{did-update}} helper provided by ember-render-helpers is the most established solution to fill that gap until something like resources settle in Ember.