灰燼從應用程序控制器設置組件數據

Question

我是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',
});

Answer 1

我不太明白為什么您要向application控制器中注入page-notices控制器。 因為您已經將page-notices組件直接放置到application.hbs 。 我可能錯了，但是我感覺到您正在混淆controller和component 。

無論如何，以下應該起作用。

1. 刪除pagenotices: Ember.inject.controller("page-notices") this; 因為如上所述，我們沒有使用pagenotices控制器。

2. 更改application.js中logout操作的ajax處理程序中的else部分，如下所示：

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

   以便將相應的屬性直接保存到application控制器本身。

3. 使用{{page-notices pageerrors=pageerrors pageerrorsview=pageerrorsview}}從application.hbs中將相應的屬性傳遞給page-notices {{page-notices pageerrors=pageerrors pageerrorsview=pageerrorsview}}

4. 在application.js聲明pageerrors和pageerorsview的初始值，並pageerorsview從page-notices pageerrors pageerorsview刪除。 我的意思是pageerrors: '', pageerrorsview: 'hide'聲明pageerrors: '', pageerrorsview: 'hide'

如果我對您的要求是正確的，最好的問候，這應該可以工作。