RiotJS - Übergeben von Ereignissen zwischen untergeordneten Tags mithilfe eines beobachtbaren Muste

Im nicht wirklich sicher, ob ich richtig verstehe, wie Observables funktionieren und wie Referenzen von gemounteten Tags abgerufen werden. Ich habe einKomponent. Innerhalb dieser Komponente haben wir einKomponent und einKomponent. Der Zweck besteht darin, eine Kopplung zwischen Bauteilen zu vermeiden. Aus diesem Grund möchte ich, dass meinsearch component löst ein Ereignis aus, wenn eine Suche durchgeführt wird (ein Knopf wird geklickt). Dieses Ereignis sollte vom @ abgefangen werdKomponent, wodurch die Sammlungsdaten basierend auf der Suche gefiltert werden.

Die Datei index.html lädt das Tag mit:

index.html

riot.mount(".content", "page", null);

Die Seite ist wie folgt definiert:

page.js

<page>
    <!-- Search tag controls -->
    <search id="searchTag"></search>

    <!-- Collection data to display -->
    <collection id="collectionTag"></collection>
</page>

Das Komponentenskript ist kurz wie folgt definiert:

search.js

var self = this;
riot.observable(self);

<!-- This function is called when the user click on the button. -->
self.filtering = function()
{
    <!-- We get data from inputs -->
    var info = Getting data from inputs;

    <!-- Trigger the event hoping that someone will observe it -->
    self.trigger("filterEvent", info);
}

Wie kann ich das @ machKomponent für dieses Ereignis beobachten?

Für mich scheint es, dass ich in der Lage sein sollte, Referenzen von @ zu bekommsearch tag undcollection tag in dem page.js. Auf diese Weise könnte ich die Ereignisse wie folgt verbinden:

searchComponent = riot.mount('search');
collectionComponent = riot.mount('collection');

searchComponent.on('filterEvent', function()
{
   <!-- Trigger function to filter collection data -->
    collectionComponent.trigger('filterData');
});

Im Moment kann ich es nicht so funktionieren lassen.

Am Punkt der Ausführung,searchComponent und collectionComponent sind nicht definiert.

I versuchte auch Referenzen dieser Komponente mit @ zu bekommthis.searchTag undthis.collectionTag anstatt sie zu mounten, aber zum Zeitpunkt der Ausführung des Codes wurden die Komponenten nicht gemountet und so bekomme ich keinen Verweis auf sie.

Haben Sie Ideen, damit es funktioniert?

Antworten auf die Frage(10)

Ihre Antwort auf die Frage