mardi 25 août 2015

Ember Communication Between Components

I'm developing a webapp to display and search documents using Mozilla's PDFJS project. I've laid out the main wrapper div like this:

<div class="wrapper">
    {{searchComponent searchComponent=searchComponent}}
    {{pdfViewer pdfSearchComponent=searchComponent}}
</div>

This allows me to later add other types of viewers in there, like so:

{{otherViewer otherSearchComponent=searchComponent}}

The outer wrapper is an ember component as well. So it's controller looks like:

Ember.controller.extend({
   searchComponent: null,
   .
   .
   otherProperties,
   actions: { }
});

And the searching component binds itself on itialization, as inspired from this source: http://ift.tt/1PMsQLa

Ember.controller.extend({
    searchComponent: null,
    .
    .
    onStart: function(){
       this.searchComponent = this;
    }.on('init'),
    .
    .
    actions: {
        someAction: function() {
            //do something
        }
    }
}

So I can now reference the component from the main pdfViewer like this:

this.get('searchComponent').send('someAction')

To get the response, right now I bind another property to all the controllers / templates, and then watch for a change on that property in the viewer controller, after which I can place the results where they need to be.

Is there a way to send a 'message' from my 'pdfViewer' to my 'searchComponent' and receive a 'response' without explicitly binding them together, as above?




Aucun commentaire:

Enregistrer un commentaire