Блог

итак, у меня есть родительский элемент в контроллере, подобный этому

 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={{this.user}}/>

вопрос в том, как выполнить функцию внутри компонента loadData при изменении @user?

Запуск действия при изменении аргумента пока не очень хорошо поддерживается примитивами Ember Octane. Общий подход заключается в использовании либо @ember / render-modifiers, либо ember-render-helpers .

@ember/render-modifiers укажите {{did-update}} модификатор. ember-render-helpers предоставьте {{did-update}} помощника. Как модификатор, так и помощник, за исключением функции в качестве аргумента первой позиции. Эта функция выполняется всякий раз, когда изменяется один из других позиционных аргументов.

{{did-update}} модификатор полезен, когда выполняемой функции требуется доступ к элементу DOM. Он устанавливает элемент DOM, к которому он присоединен, в качестве аргумента функции при вызове.

{{did-update}} помощник полезен, когда выполняемой функции не требуется доступ к элементу DOM.

 {{! 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 . Почти во всех случаях конкретный модификатор, содержащий логику, которая должна выполняться, сам по себе является лучшим решением. Он обеспечивает лучшую возможность повторного использования, может быть протестирован изолированно и имеет четкие границы для компонентов, в которых он используется.

Основной вариант использования {{did-update}} помощника — заполнить пробел в текущей модели программирования Ember Octance. Ember Octance предоставляет потрясающий опыт разработчика для производного состояния благодаря автотрекингу и встроенным геттерам. Это обеспечивает отличный опыт для изменения элемента DOM в зависимости от значения. Но у него еще нет больших примитивов, чтобы запускать такие действия, как загрузка данных при изменении аргумента.

Сообщество в настоящее время экспериментирует с различными подходами, чтобы заполнить этот пробел. Похоже @use , это зависит от декоратора и ресурсов, как предложил Крис Гаррет (pzuraq) в RFC и в недавнем сообщении в блоге. Он доступен для экспериментов как часть пакета ember-could-get-used-to-this.

{{did-update}} Помощник, предоставляемый ember-render-helpers является наиболее распространенным решением для заполнения этого пробела, пока что-то вроде ресурсов не осядет в Ember.