Wie lege ich eine Eigenschaft einer Ember-Komponente von einer anderen Komponente fest?

Question

Also habe ich ein Teil dieser App, die eine modale-Fenster Komponente hat, die öffnen soll, wenn Sie die Eigenschaft auf true gesetzt aktiviert ..

application.hbs hat dies:

{{#modal-window enabled=true title="Manage Admins"}} 
{{/modal-window}} 

In modal -window.js Ich habe eine Aktion closeModal, die this.set('enabled',false) tut und ebenfalls, um es zu öffnen, setzen Sie es auf wahr.

Es gibt ein Nav-Menü am unteren Rand der App, das verschiedene Komponenten help-link, admin-link usw. verwendet. Admin-link ist auch eine Komponente mit eigener hbs und js-Datei. So wurde die App gestaltet. Am unteren Ende index.hbs:

<div class="configs-list-footer"> 
{{help-link}} 
{{admin-link action='showModal'}} 
<div class="logout-link"> 
    <a {{action 'invalidateSession'}} class="tv-icon"> 
    <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(1.000000, 1.000000)"><path d="M0.347826087,8 L10.7826087,8"></path><polyline id="Stroke-937" points="8 5.2173913 10.7826087 8 8 10.7826087"></polyline><path d="M1.03123478,4.83526957 C2.23471304,2.18831304 4.90253913,0.347617391 8.00027826,0.347617391 C12.2263652,0.347617391 15.6524522,3.77370435 15.6524522,7.9997913 C15.6524522,12.2258783 12.2263652,15.6519652 8.00027826,15.6519652 C4.88862609,15.6519652 2.21036522,13.7952696 1.01453913,11.1288348"></path></g></g></svg> 
    <span>Logout</span> 
    </a> 
</div> 

Die Aktion gibt eine Aktion in der Admin-link.js-Datei aufruft, aber es scheint keine Möglichkeit zu sein modal-Fenster zu sagen, auf true gesetzt ist aktiviert von AUSSENSEITE von sich selbst, die eine Grundfunktion jedes Programms ist.

Ich kann nicht für das Leben von mir nach der Suche im Internet für Stunden herauszufinden, wie einfach die 'aktiviert' Eigenschaft von Modal-Fenster auf wahr gesetzt, wenn Sie auf die Admin-Link-Komponente (die im Grunde ein Anker-Tag ist) ..

Ich habe herausgefunden, wie eine Aktion von der Index-Route aufgerufen wird, aber dann genau wie mit Komponente zu Komponente kann ich nicht herausfinden, wie Sie die Eigenschaft des modalen Fensters aus der Indexroute ändern.

Immer wenn jemand online fragt, wie man das macht, werden sie mit "Komponenten sollten isoliert und nichts von allem anderen" ohne offensichtlichen Weg, etwas so Grundlegendes für eine UI zu tun getroffen.

Ich bin mit Ember 2.12.1

Answer 1

Es ist keine Antwort auf Ihre genaue Frage, aber der Ansatz, den wir für modals verwenden ist, um die Komponente in einem bedingten zu wickeln, anstatt es eine Eigenschaft des Bauteils zu machen. z.B.

{{#if manageAdminsIsOpen}} 
    {{#modal-window title="Manage Admins"}} 
    {{/modal-window}} 
{{/if}} 

und dann Aktionen auf dem Controller verwendet werden manageAdminsIsOpen hin- und herzuschalten.

Ich machte eine Ember Twiddle mit an example.

Answer 2

Ich bin mir bewusst, dass dies eine Ember Frage ist; aber ich schlage vor, dass Sie über Quick start documentation of React gehen. Die komponentenorientierte Frontend-Entwicklung ist recht gut zu erklären. Ein bestimmter Ausdruck existiert in Lifting state up section ist der folgende: "Oft müssen mehrere Komponenten die gleichen sich ändernden Daten widerspiegeln. Wir empfehlen, den gemeinsamen Zustand bis zu ihrem nächsten gemeinsamen Vorfahren zu heben."

Dies ist bei Ihnen der Fall. Der Zustand, in dem der modale Dialog angezeigt wird, gehört nicht zu modal-window selbst, da Sie ihn von woanders aus wechseln müssen. Daher müssen Sie diesen Zustand beim gemeinsamen Vorfahren verwalten; das ist der application.js Controller in Ihrem Fall, denke ich. Daher sollten Aktionen bis zum application Controller geblasen werden (ich meine, sogar das Schließen des modalen Dialogs sollte von application Controller innerhalb einer Aktion durchgeführt werden).

In Bezug auf Ihre Frage, AFAIK gibt es keine Möglichkeit, eine Eigenschaft einer Komponente aus einer anderen Komponente zu setzen.Die Technik, die ich allgemein anwende, hebt den Zustand auf einen gemeinsamen Vorfahren an. Ich bevorzuge es selten, service zu erstellen und Attribute und Funktionen innerhalb des Service zu definieren, um den anwendungsweiten Status beizubehalten. Wenn Sie diesen zweiten Ansatz bevorzugen, können Sie den Dienst also in beide Komponenten einfügen, und eine Komponente kann einen Status anzeigen, der zu dem Dienst gehört, während der andere den Dienst über Funktionen innerhalb des Dienstes ändern kann.

Sie haben recht, wenn Komponenten isoliert werden. Eine Komponente, die ausschließlich isoliert arbeitet, ist jedoch nutzlos; Komponenten sollten Attribute von Eigentümern akzeptieren und Aktionen (Ereignisse) bereitstellen, an denen sie arbeiten können. Vergessen Sie nicht, Daten nach unten Aktionsprinzip anzuwenden, und es funktioniert im Allgemeinen gut mit dem Prinzip der Aufhebung des Zustands. Dies war eine lange Beschreibung; aber ich hoffe, es wird hilfreich sein.