ember.js 如何触发一个组件内的功能,每当参数在Emnber辛烷值变化

gcuhipw9  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(150)

所以我在控制器中有一个这样的父进程

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
问题是当@user改变时,如何执行组件loadData内函数?

wmtdaxz3

wmtdaxz31#

Ember Octane原语还不能很好地支持当参数改变时触发一个动作。一种常见的方法是使用@ember/render-modifier或ember-render-helpers。
@ember/render-modifiers提供一个{{did-update}} * 修饰符 *。ember-render-helpers提供一个{{did-update}} * 帮助符 *。修饰符和帮助符都有一个函数作为第一个位置参数。只要其他位置参数之一发生更改,就会执行该函数。
{{did-update}}修饰符在所执行的函数需要访问DOM元素时很有用。它在调用时将其附加到的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}}modifier 的主要用例是简化从传统@ember/component@glimmer/component的迁移。几乎在所有情况下,包含逻辑的特定modifier(应该执行)本身是更好的解决方案。它提供更好的可重用性,可以单独测试,并且与使用它的组件有清晰的边界。
{{did-update}}helper 的主要用例是填补当前Ember Octance编程模型的空白。Ember Octance通过自动跟踪和原生getter为派生状态提供了极好的开发者体验。它提供了根据值修改DOM元素的极好体验。但它还没有很好的原语来触发参数更改时的数据加载等操作。
社区目前正在尝试不同的方法来填补这个空白。它似乎是基于Chris Garret(pzuraq)在an RFCin a recent blog post中提出的@use装饰器和资源。它可以作为ember-could-get-used-to-this包的一部分用于实验。
ember-render-helpers提供的{{did-update}}助手是最成熟的解决方案,可以填补这一空白,直到像 resources 这样的东西在Ember中安顿下来。

相关问题