Search code examples
javascriptweb-componentriot.js

RiotJS - How to pass events between subtags using Observable pattern?

Im not really sure if Im understanding correctly the way observables work and how to get references from mounted tags. I have a component. Within this component we have a component and a component. The purpose is to avoid coupling between components. Because of that, I would like that my search component triggers an event when a search is done(a button is clicked). This event should be caught by the component which will filter the collection data based on the search.

The index.html file load the tag by using:

index.html

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

The page is defined as follow:

page.js

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

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

The component script is briefly defined like:

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);
}

How can I make the component observe for that event?

To me it seems that I should be able to get references from search tag and collection tag in the page.js. By doing so I could connect the events like follow:

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

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

Right now I cannot make it work like that.

At the point of execution, searchComponent and collectionComponent are not defined.

I tried also getting references of these component by using this.searchTag and this.collectionTag instead of mounting them but at the time the code is executed, the components have not been mounted and so I dont get a reference to them.

Any ideas to make it work?

Solution

  • Firstly I do not understand your file structure !

    In your place I would change filenames :

    page.js --> page.tag

    search.js --> search.tag

    And i dont see your search tag in search.js code.

    So I dont see your Collection tag file ...

    Are you sure that this one use this code ? riot.observable({self|this}); Because it's him who will receive an Event.

    For me when I use Riot.js(2.2.2) in my browser, if I use searchComponent = riot.mount('search'); searchComponent will be undefined

    But with this code you can save your monted tag reference :

    var searchComponent ={};
riot.compile(function() {
    searchComponent = riot.mount('search')[0];
});