我是Ember的新手,正在尝试弄清楚数据路由的工作原理。我的application.hbs文件中包含一个“页面通知”组件和模板。它处理向用户显示错误或其他通知。我无法弄清楚如何从应用程序控制器设置组件内部的数据。
当用户在应用程序控制器中触发注销操作时,我通过ajax json请求将其发送到服务器,然后如果返回错误,则需要更新页面通知组件。要完成此操作,页面通知控制器需要什么样的外观?我问的是错误的问题,不应该为此使用控制器吗?
//app/templates/application.hbs
{{app-header}}
<div id="pagecontent">
{{page-notices}}
<div id="wrapper">
{{outlet}}
<div class="push"></div>
</div>
</div>
{{app-footer}}
//app/controllers/application.js
import Ember from 'ember';
import ENV from '/config/environment';
var $ = Ember.$;
export default Ember.Controller.extend({
session: Ember.inject.service('session'),
pagenotices: Ember.inject.controller("page-notices")
actions: {
logout: function() {
var self = this;
$.ajax({
dataType: "json",
method: 'GET',
url: ENV.APP.apiHost,
data: {p: 'logout'},
success: function( response ){
if( response.success || (response.loggedin == false) ){
self.get('session').invalidate();
self.transitionToLoginRoute();
} else {
self.get('pagenotices').set('pageerrors', response.error);
self.get('pagenotices').set('pageerrorsview', '');
}
}
});
},
},
transitionToLoginRoute: function() {
this.transitionToRoute('login');
},
});
//app/templates/components/page-notices.js
<div id="pagenotices" class="{{pagenoticeview}}">
<div id="pageerrors" class="error centered {{pageerrorsview}}">{{pageerrors}}</div>
<div id="pagemessages" class="notice centered {{pagemessagesview}}">{{pagemessages}}</div>
</div>
//app/components/page-notices.js
import Ember from 'ember';
import ENV from '/config/environment';
const { inject: { service }, Component } = Ember;
export default Component.extend({
pagenoticeview: 'hide',
pageerrors: '',
pageerrorsview: 'hide',
pagemessages: '',
pagemessagesview: 'hide',
});
最佳答案
我不太明白为什么您将page-notices
控制器注入到application
控制器中。因为您已经将page-notices
组件直接放入application.hbs
。我可能错了,但我感觉到您混淆了controller
和component
。
无论如何,以下应该起作用。
删除pagenotices: Ember.inject.controller("page-notices")
这个;因为如上所述,我们没有使用pagenotices
控制器。
更改else
中logout
操作的ajax处理程序中的application.js
部分,如下所示:
self.set('pageerrors', response.error);
self.set('pageerrorsview', '');
以便将相应的属性直接保存到
application
控制器本身。从
page-notices
内部将相应的属性传递给application.hbs
组件{{page-notices pageerrors=pageerrors pageerrorsview=pageerrorsview}}
在
pageerrors
中声明pageerorsview
和application.js
的初始值,并根据需要将其从page-notices
组件中删除。我的意思是pageerrors: '', pageerrorsview: 'hide'
的声明如果我对您的要求是正确的,最好的问候,这应该可以工作。