ember Set Komponentendaten von Application Controller

Question

Ich bin neu in Ember und versuchen herauszufinden, wie das Datenrouting funktioniert. Ich habe eine 'Seitenbenachrichtigung' Komponente und eine Vorlage, die in meiner application.hbs Datei enthalten ist. Es behandelt Fehler oder andere Benachrichtigungen an Benutzer. Ich kann nicht herausfinden, wie man die Daten innerhalb der Komponente vom Application Controller einstellt.

Wenn ein Benutzer eine Abmeldeaktion im Anwendungscontroller auslöst, sende ich ihn über ajax json request an den Server und muss dann die Seitenbenachrichtigungskomponente aktualisieren, wenn ein Fehler zurückgegeben wurde. Wie muss der Seitenbenachrichtigungs-Controller aussehen, um dies zu erreichen? Stelle ich die falsche Frage und sollte den Controller dafür nicht verwenden?

//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

Ich habe nicht ganz verstanden, warum Sie page-notices Controller application Controller injiziert; weil Sie bereits page-notices Komponente direkt auf application.hbs gesetzt haben. Ich könnte falsch liegen, aber ich habe das Gefühl, dass Sie eine controller und eine component verwirren.

Wie auch immer, das Folgende sollte funktionieren.

1. Entfernen pagenotices: Ember.inject.controller("page-notices") dies; da wir keine arbeit mit pagenotices controller wie ich oben erklärt habe.

2. Ändern der else an ajax Handler von logout Aktion innerhalb application.js wie folgt:

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

   so dass die entsprechenden Attribute direkt an application Steuerung gespeichert selbst.

3. Führen Sie die entsprechenden Attribute zu page-notices Komponente aus application.hbs mit {{page-notices pageerrors=pageerrors pageerrorsview=pageerrorsview}}

4. Deklarieren Sie die Anfangswerte von pageerrors und pageerorsview innerhalb application.js und sie von page-notices Komponente entfernen, wenn Sie möchten. Ich meine Erklärungen von pageerrors: '', pageerrorsview: 'hide'

Dies sollte funktionieren, wenn ich bekam, was Sie Recht, den besten Grüßen fragen.