Passing Data Back to Components - ember.js

Question

I currently have a component a couple of components. One is a component to display all my table view data, and inside of that component, is another to display the search fields. They look like so:
{{#table-display model=model}}
<table class="data-table">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>Email Address</th>
</tr>
</thead>
<tbody>
{{#each filteredModel as |contact| }}
{{#link-to 'contacts.edit' contact tagName="tr"}}
<td>{{ current-status model=contact }}</td>
<td>{{ contact.name }}</td>
<td><em>{{ contact.name }}</em></td>
<td><em>{{ contact.email }}</em></td>
{{/link-to}}
{{/each}}
</tbody>
</table>
{{/table-display}}
Then inside of the table-display component, I have my search filter input.
{{input value=filterString placeholder="Search Contacts" }}
The table filtering works if I put the table into the table-display component, but not if it's just within the component. What am I doing wrong here?

Answer 1

There is a few ways to get the fitleredModel data to flow out of the component, the idiomatic way is to use HTMLBars blocked params.
Inside table-display's template:
...
{{input value=filterString placeholder="Search Contacts" }}
...
{{yield filteredModel}}
And then in your main template:
{{#table-display model=model as |filteredModel|}}
...
{{#each filteredModel as |contact|}}
...
{{/each}}
{{/table-display}}