组件中的 Ember.js 计算属性 vs 观察者 vs didReceiveAttrs()

Posted 2023-02-23

【中文标题】组件中的 Ember.js 计算属性 vs 观察者 vs didReceiveAttrs()

【英文标题】：Ember.js Computed Property vs Observer vs didReceiveAttrs() in a Component

【发布时间】：2016-12-30 10:53:05

【问题描述】：

我在我的 ember.js 应用程序中创建了一个顶部导航栏并将其转换为一个组件，以便在用户登录后我可以有一个简单的“欢迎 currentUser.fullName”介绍。还有一些其他原因为什么导航栏将成为一个组件，但现在这就是我想要正常工作的原因。我们还使用了 ember-simple-auth 插件，我正在使用 session.isAuthenticated 值来实现这一点。

当然，我有一个“登录”路线，当用户登录时，他们会转换到“索引”。出于某种原因，在过渡到“索引”期间似乎没有立即捕获 session.isAuthenticated 值。我不知道这是为什么，但这是另一个问题。

无论如何，我在这个应用程序中使用了很多组件，其中大多数组件从会话中获取它们的值，并独立于路由查询存储，以便我可以在多个路由上使用这些组件。导航栏也不例外。现在我有以下工作代码：

export default Ember.Component.extend(
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    isAuthenticated: Ember.observer('session.isAuthenticated', function() 
        this.didReceiveAttrs();
    ),
    currentUserFullName: null,
    user: null,
    tagName: 'navbar-main',
    className: ['navbar', 'main'],
    didReceiveAttrs() 
        this._super(...arguments);

        if (this.get('session.isAuthenticated')) 
            this._setCurrentUser();
        
    ,
    _setCurrentUser() 
        this.get('currentUser').load().then(user => this.set('user', user));
    ,
    onGetCurrentUser: Ember.observer('user', function() 
        this.getUser();
    ),
    getUser: function() 
        var user = this.get('user');

        if(user) 
            this.set('user', user);
            this.set('currentUserFullName', user.get('fullName'));
         else 
            user = this.get('store').findRecord('user', 'me');
            this.set('user', user);
            this.set('currentUserFullName', user.get('fullName'));
        
    
);

我正在阅读的所有内容都建议只使用didReceiveAttrs() 而不是观察者。此外，它表示计算属性通常是您希望在观察者上使用的。但是，如果没有以下内容，我似乎无法工作：

isAuthenticated: Ember.observer('session.isAuthenticated', function() 
    this.didReceiveAttrs();
),

如果我尝试将其转换为计算属性，它似乎不会对属性更改做任何事情，除非我在页面已经转换到“索引”路由后刷新页面。如果我尝试仅使用 didReceiveAttrs() 方法和 this.get('session.isAuthenticated') 逻辑，仍然需要刷新页面。

那么我不明白如何使用Ember.computed和didReceiveAttrs()？有人可以给我一个例子吗？或者告诉我一个更有效的方法来完成我想要完成的事情？

更新代码：

// app/pods/components/navbar-main/component.js
import Ember from 'ember';
import layout from './template'; 

export default Ember.Component.extend(
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    user: null,
    isAuthenticated: Ember.observer('session.isAuthenticated', function() 
        this.get('currentUser').load().then(user => this.set('user', user));
    ),
    currentUserFullName: Ember.computed.alias('user.fullName'),
    tagName: 'navbar-main',
    className: ['navbar', 'main'],
    didReceiveAttrs() 
        this._super(...arguments);

        if(this.get('session.isAuthenticated')) 
            this.isAuthenticated();
        
    
);

<!-- app/pods/components/navbar-main/template.hbs -->
#if session.isAuthenticated
    <div class="ui black user login label">
        <div class="ui grid">
            <div class="twelve wide column">
                <div class="detailed">currentUserFullName<br>Welcome</div>
            </div>
            <div class="four wide column" style="padding-top: 12px; margin-top: 0;">
                <img class="ui top aligned small avatar image" src="http://semantic-ui.com/images/avatar/small/christian.jpg">
                <!--<img class="ui top aligned tiny avatar image" src="currentUser.avatar">-->
            </div>
        </div>
    </div>
/if

更新 2（在 @AdamCooper 和 @kumkanillam 的帮助下的最终代码）：

export default Ember.Component.extend(
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    user: null,
    isAuthenticated: Ember.on('init', Ember.observer('session.isAuthenticated', function() 
        this.get('currentUser').load().then(user => this.set('user', user));
    )),
    currentUserFullName: Ember.computed.alias('user.fullName'),
    tagName: 'navbar-main',
    className: ['navbar', 'main']
);

所以这是最少的代码，仍然使用观察者和计算方法，但不使用组件生命周期。所以我想有时还是有必要使用观察者是我想出的。

【参考方案1】：

作为一般规则，您希望尽可能避免使用观察者。 Steffan Penner 对观察者有一个great video，我建议您观看以真正了解为什么它们对您的代码库有潜在危险。

在您的情况下，load() 函数返回一个承诺，这不是您希望从计算属性返回的东西，因此您需要在 isAuthenticated 上使用观察者。 我已经尽可能地简化了你的代码，但无法运行它，但希望你能明白：

export default Ember.Component.extend(
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),

    user: null,

    authenticatedObserver: Ember.observer('session.isAuthenticated', function() 
        // Load the user, this will cause the currentUserFullName to be 
        // updated. We're using an observer here because load() returns
        // a promise 
        this.get('currentUser').load().then(user => this.set('user', user));
    ),

    // This computed property will be re-calculated whenever user is modified
    currentUserFullName: Ember.computed.alias('user.fullName')  
);

【讨论】：

~ 所以这与我已经听到和读过的关于观察者的内容基本相同，但你的答案仍然使用观察者？哈哈。我可以假设这种特殊情况需要使用观察者吗？

我只在必要的地方使用观察者。这就是你调用加载函数的地方

所以如果我仍然使用didReceiveAttrs() this._super(...arguments); if(this.get('session.isAuthenticated')) this.isAuthenticated(); ,，这肯定会缩短代码，但我仍然不确定到底发生了什么，因为如果我使用this.get('currentUserFullName')' or a this.get(' user'), I get null values. I also have to change my template to #if session.isAuthenticated` 而不是 #if currentUser 以隐藏与之相关的元素。这听起来对吗？

你能用你现在的代码更新你的问题吗

好的，我添加了@kumkanillam 的建议，所以这更像是你们两个共同努力，但这个答案是最接近的。我更新的代码在上面是有效的。

【参考方案2】：

Ember 会根据渲染场景依次调用组件生命周期钩子方法。

初始渲染 - init,didReceiveAttrs,willRender,didInsertElement,didRender 重新渲染时 - didUpdateAttrs,didReceiveAttrs,willUpdate,willRender,didRender 组件销毁 - willDestroyElement,willClearRender,didDestroyElement （参考——https://guides.emberjs.com/v2.7.0/components/the-component-lifecycle/）

我们不应该调用那些组件生命周期钩子方法。

我相信，您可以将 currentUser 特定代码完全隔离到 currentUser 服务，以便您可以轻松地为所有组件注入和使用它。

export default Ember.Component.extend(
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    currentUserFullName: Ember.computed.alias('currentUser.currentUserFullName'),
    user: Ember.computed.alias('currentUser.user'),

    tagName: 'navbar-main',
    className: ['navbar', 'main'],    

);

通过观察 session.isAuthenticated 属性初始化 currentUser 及其详细信息。

services\current-user.js

import Ember from 'ember';

export default Ember.Service.extend(
  session: Ember.inject.service(),
  currentUserFullName: null,
  user: null,

  loadCurrentUserDetails:Ember.observer('session.isAuthenticated', function()
    //load async data and set user and currentUserFullName.
  )
);

【讨论】：

~ 我想知道初始化，但还没有真正触及初始化器。我会对此进行调查并发表评论。

我实际上在我的项目中使用了一个 ember 插件节点包，该项目已经为 currentUser 提供了服务，所以这对我不起作用。我不想更改与之相关的服务，但该服务正在使用计算属性：currentUserId: Ember.computed('session.data.authenticated', function() var session = this.get('session'); if (session.get('isAuthenticated')) return session.get('data.authenticated.id'); else return null;),

然后：load() return new Ember.RSVP.Promise((resolve, reject) => var currentUserId = this.get('currentUserId');if (currentUserId) var currentUser = this.get('store').peekRecord('user', currentUserId);if (currentUser) resolve(currentUser); else this.get('store').findRecord('user', currentUserId).then((user) => resolve(user), reject); else reject(););，所以使用这个已经存在的服务，我使用了上面@AdamCooper 的建议，仍然添加了一个didReceiveAttrs() 函数来让它工作（上面解释过）。这是最好的方法吗？

不，你不应该打电话给didReceiveAttrs()恕我直言。在对象初始化完成之前，观察者永远不会触发。 Reference 。你可以试试这个.. isAuthenticated: Ember.on('init',Ember.observer('session.isAuthenticated', function() this.get('currentUser').load().then(user => this.set('user', user)); ))

~ 非常感谢！这成功了。我更新了我的帖子。

【参考方案3】：

这就是我最终得到的适合我的情况：

export default Ember.Component.extend(
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    user: null,
    isAuthenticated: Ember.on('init', Ember.observer('session.isAuthenticated', function() 
        this.get('currentUser').load().then(user => this.set('user', user));
    )),
    currentUserFullName: Ember.computed.alias('user.fullName'),
    tagName: 'navbar-main',
    className: ['navbar', 'main']
);

这是使用Ember Freak 和Adam Cooper 对此问题的答案的组合。