从应用程序控制器设置组件数据

Question

我是Ember的新手，试图弄清楚数据路由是如何工作的。我有一个'page-notices'组件和包含在我的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', 
}); 

Answer 1

我不太明白你为什么把page-notices控制器注入到application控制器;因为您已经将page-notices组件直接放入application.hbs。我可能是错的，但我知道你很困惑controller和component。

无论如何，下面应该工作。

1. 删除pagenotices: Ember.inject.controller("page-notices")这个;因为我们没有与pagenotices控制器一起工作，正如我上面所解释的那样。

2. 更改else部分的logout行动阿贾克斯处理程序中application.js如下：

   self.set('pageerrors', response.error); 
       self.set('pageerrorsview', ''); 
   

   使相应的属性直接保存到application控制器本身。

3. 从application.hbs内通过相应的属性来page-notices组件与 {{page-notices pageerrors=pageerrors pageerrorsview=pageerrorsview}}

4. 声明中application.js的pageerrors和pageerorsview的初始值，如果你想从page-notices组件删除它们。我的意思是pageerrors: '', pageerrorsview: 'hide'

这应该工作，如果我得到你问的权利，最好的问候。