Here you go: Ember Twiddle
This is one of the problems where I think there are a few different ways to go about this. My solution was to create a computed property that filters the list of students on the javascript component. Then the template binds to the filtered list. Example:
visibleDetails: Ember.computed('filteredStudent', 'studentDetails.[]', function() {
let studentDetails = this.get('studentDetails') || [],
filteredStudent = this.get('filteredStudent');
return filteredStudent ?
studentDetails.filterBy('student', filteredStudent) :
studentDetails;
}),
So that’s pretty simple, it just uses Ember’s filterBy array function. Updating either the filteredStudent property or the list of details will cause that to be recomputed. It may seem inefficient with larger lists, but the new glimmer engine does a really good job about being smart with it’s DOM updates.
The other, and sometimes more desirable, option would be use an ember helper. Here is a great repo with truth helpers: GitHub - jmurphyau/ember-truth-helpers: Ember HTMLBars Helpers for {{if}} & {{unless}}: not, and, or, eq & is-array . If you had included that in your project, you could do something like this:
{{#each studentDetails as |details|}}
{{#if (or (not filteredStudent) (eq details.student filteredStudent) )}}
<tr>
<td>{{details.student.id}}</td>
<td>{{details.student.name}}</td>
<td>{{details.text}}</td>
</tr>
{{/if}}
{{/each}}
In this case the template does iterate over all of the details and only renders markup for if there is no filter, or if the details matches the student filter. This one is a little uglier to look at because it has nested helpers. But it’s worth noting because it’s such a powerful concept.
Lets say instead of filtering out students, you wanted to “highlight” the selected student. You could do something like this:
{{#each studentDetails as |details|}}
<tr class="{{if (eq details.student highlightStudent) 'highlight-row'}}">
<td>{{details.student.id}}</td>
<td>{{details.student.name}}</td>
<td>{{details.text}}</td>
</tr>
{{/each}}
So that let’s you loop through all the details and add a class conditionally.
Hopefully that all helps! I’m happy to provide any follow up. I’m going to bed shortly, but I’ll be around in the AM.