title: How should I share data between Ember components?
body: <p>My Ember app has a route that contains 2 different components and one controller with an index.hbs template.</p>
  
  <p>Here's what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/7na3w.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7na3w.png" alt="enter image description here"></a></p>
  
  <p><strong>1)</strong> A user can select multiple filters from the dropdowns of the Filter Component</p>
  
  <p><strong>2)</strong> The DataGrid is a separate component from the filter</p>
  
  <p><strong>3)</strong> A user can select multiple rows from the DataGrid by checking boxes</p>
  
  <p><strong>4)</strong> Create Custom Report button fires "sendAction" to the route's controller</p>
  
  <p>This data is not model-specific... it's just temporary data that is required before I can make a custom report.</p>
  
  <p>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.</p>
  
  <p>The problem, though, is that <strong>the createCustomReport method in the controller needs to have access to all of the filters that were selected in the filter-component along with all of the rows that were checked in the grid-component.</strong></p>
  
  <p>My first instinct is to set the properties on the component itself - have it maintain its own state - then get a reference to the component from the controller in order to get its state before passing it off to the report function.</p>
  
  <p>But apparently that is a no-no.</p>
  
  <hr>
  
  <p><strong>Here's my Current Solution:</strong></p>
  
  <p>Each time I select a filter, there is a sendAction that bubbles up to the controller from the component and sets a custom property on the controller.</p>
  
  <p>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.</p>
  
  <p>Then, when I click "createCustomReport" the method that fires in the controller has access to the properties that I set earlier - because they are all on the controller now.</p>
  
  <p>So it looks something like this:</p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Controller.extend({
  
      myFirstFilter: undefined,
      mySecondFilter: undefined,
  
      actions: {
          createCustomReport() {
              // do something with all those component properties you've been setting
          },
  
          // These are triggered by the sendAction on the respective component
          firstFilterMethod(myProperty1) {                
              this.set('myFirstFilter', myProperty1.name);
          },
  
          secondFilterMethod(myProperty2) {               
              this.set('mySecondFilter', myProperty2.name);
          },
  
          ... etc...
  
  
      }
  });
  </code></pre>
  
  <hr>
  
  <p><strong>Here's My Problem With This</strong></p>
  
  <p>I'm not directly accessing the components from the controller, but by using the "Actions Up" principle, I'm setting properties on the controller that are view specific.</p>
  
  <p>Coming from a Sencha ExtJS background where controllers have references to their views, I find this very weird.</p>
  
  <p>By not getting references to components, I'm supposed to be decoupling my controller from its views... but since all the properties I'm setting would normally be on the view, the controller ends up being <em>even more coupled</em> to the view than it would be if I were to just get a reference to the component. </p>
  
  <p><strong>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?</strong></p>