mercredi 6 juillet 2016

Ember.js Best Practices - Sharing data between Components

My Ember app has route that contains 2 different components and one controller with an index.hbs template.

Here's what it looks like:

enter image description here

1) A user can select a filter from the filter's component.

2) The DataGrid is a separate component from the filter

3) A user can select multiple rows from the DataGrid by checking boxes

4) Create Custom Report button fires "sendAction" to the route's controller

This data is not model-specific... it's just temporary data that is required before I can make a custom report.

Ember best practices are "Data Down / Actions Up", and from what I read, you shouldn't be trying to access a component from a controller.

The problem, though, is that the createCustomReport method in the controller needs to have access to all of the filters that were selected along with all of the rows.


Here's my Current Solution:

Each time I select a filter, there is a sendAction that bubbles up to the controller and sets a custom property on the controller.

Also, each time I select a checkbox from the grid, another sendAction goes to the component, then bubbles up to the controller and sets a custom property on the controller for selected grid rows.

Then, when I click "createCustomReport" the method that fires in the controller has access to the properties that I set earlier.


Here's My Problem With This

I'm not directly accessing the views from the controller, but by using the "Actions Up" principle, I'm setting properties on the controller that are view specific.

Coming from a Sencha ExtJS background where controllers have references to their views, I find this very weird.

Is this considered "best practice" in Ember or is there a better way for me to get the data of all these separate components in order to fire off the createCustomReport method?




Aucun commentaire:

Enregistrer un commentaire