灰烬辛烷如何获取要显示的错误消息？ [英] Ember Octane How to Get Error Messages to be Displayed?
问题描述
此问题与 Ember Octane有关升级如何将值从组件传递到控制器
如何使Ember Octane显示在网页上？例如，如果旧密码和新密码相同，则我们希望该错误显示在页面上。
How do I get Ember Octane to display on the webpage? For instance, if the old password and new password are the same we want that error to display on the page.
代码示例：
用户输入表单
ChangePasswordForm.hbs
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<h3>Change Password</h3>
<form class="m-t" role="form" {{on "submit" this.changePassword}}>
{{#each this.errors as |error|}}
<div class="error-alert">{{error.detail}}</div>
{{/each}}
<div class="form-group">
<Input @type="password" class="form-control" placeholder="Old Password" @value={{this.oldPassword}} required="true" />
</div>
<div class="form-group">
<Input @type="password" class="form-control" placeholder="New Password" @value={{this.newPassword}} required="true" />
</div>
<div class="form-group">
<Input @type="password" class="form-control" placeholder="Confirm Password" @value={{this.confirmPassword}} required="true" />
</div>
<div>
<button type="submit" class="btn btn-primary block full-width m-b">Submit</button>
</div>
</form>
</div>
</div>
模板组件
ChangePassword .hbs
<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />
Component
Component
ChangePasswordForm。 js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ChangePasswordForm extends Component {
@tracked oldPassword;
@tracked newPassword;
@tracked confirmPassword;
@tracked errors = [];
@action
changeOldPassword(ev) {
this.oldPassword = ev.target.value;
}
@action
changeNewPassword(ev) {
this.newPassword = ev.target.value;
}
@action
changeConfirmPassword(ev) {
this.confirmPassword = ev.target.value;
}
@action
changePassword(ev) {
ev.preventDefault();
this.args.changePassword({
oldPassword: this.oldPassword,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword
});
}
}
控制器
ChangePassword.js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class ChangePassword extends Controller {
@service ajax
@service session
@action
changePassword(attrs) {
if(attrs.newPassword == attrs.oldPassword)
{
shown in the UI.
this.set('errors', [{
detail: "The old password and new password are the same. The password was not changed.",
status: 1003,
title: 'Change Password Failed'
}]);
}
else if(attrs.newPassword != attrs.confirmPassword)
{
this.set('errors', [{
detail: "The new password and confirm password must be the same value. The password was not changed.",
status: 1003,
title: 'Change Password Failed'
}]);
}
else
{
let token = this.get('session.data.authenticated.token');
this.ajax.request(this.store.adapterFor('application').get('host') + "/clients/change-password", {
method: 'POST',
data: JSON.stringify({
data: {
attributes: {
"old-password" : attrs.oldPassword,
"new-password" : attrs.newPassword,
"confirm-password" : attrs.confirmPassword
},
type: 'change-passwords'
}
}),
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/vnd.api+json',
'Accept': 'application/vnd.api+json'
}
})
.then(() => {
this.transitionToRoute('clients.change-password-success');
})
.catch((ex) => {
this.set('errors', ex.payload.errors);
});
}
}
}
模型
ChangePassword.js
import Route from '@ember/routing/route';
import AbcAuthenticatedRouteMixin from '../../mixins/efa-authenticated-route-mixin';
export default class ChangePasswordRoute extends Route.extend(AbcAuthenticatedRouteMixin) {
model() {
// Return a new model.
return {
oldPassword: '',
newPassword: '',
confirmPassword: ''
};
}
}
推荐答案
在您的表单组件中，您引用了以下错误：
In your form component, you reference the errors like
{{#each this.errors as |error|}}
<div class="error-alert">{{error.detail}}</div>
{{/each}}
从类组件->发光组件中，
From class components -> glimmer components, there's been a fundamental shift in the way you access the component's arguments vs the component's own values (for the better!)
在类组件中，分配了自变量直接到
类实例。多年来，这引起了很多问题，从方法
和操作被覆盖，到不清楚的代码（内部类值和参数之间的差
难以推论）。
In class components, arguments are assigned directly to the class instance. This has caused a lot of issues over the years, from methods and actions being overwritten, to unclear code where the difference between internal class values and arguments is hard to reason about.
新组件通过将所有参数放在对象
中作为args属性来解决此问题。
New components solve this by placing all arguments in an object available as the args property.
在javascript中引用某个组件的参数时，请使用： this.args.someArg 。在模板中，使用速记 @someArg 。这些称为命名参数（可随时阅读 rfc 了解更多信息）。当您像在此处一样在模板中使用 this.errors 时，您正在寻找本地组件属性 errors 。
When referencing an argument to a component in javascript, you use: this.args.someArg. In the template, you use the shorthand @someArg. These are known as "named arguments" (feel free to read the rfc for more info). When you, as you did here, use this.errors in your template, you are looking for a local component property errors.
仅强调一下，这没有用，因为错误是通过<$传递给 Clients :: ChangePasswordForm c $ c> @errors 此处：
Just to emphasize, this does not work because errors is passed to Clients::ChangePasswordForm via @errors here:
<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />
，并且模板中必须为 @errors
{{#each @errors as |error|}}
<div class="error-alert">{{error.detail}}</div>
{{/each}}
这篇关于灰烬辛烷如何获取要显示的错误消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
