gpt4 book ai didi

Ember.js 组件中的计算属性 vs Observer vs didReceiveAttrs()

转载 作者:行者123 更新时间:2023-12-01 22:20:52 27 4
gpt4 key购买 nike

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

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

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

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.compulateddidReceiveAttrs() 有什么不明白的地方?有人能给我举个例子吗?或者告诉我一种更有效的方法来完成我想要完成的任务?

更新的代码:

// 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']
});

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

最佳答案

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

在您的情况下,load() 函数返回一个 promise ,这不是您想要从计算属性返回的内容,因此您需要在 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')
});

关于Ember.js 组件中的计算属性 vs Observer vs didReceiveAttrs(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39104074/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com