filtering results need updating when query param changes

Question

With the code below, I want the status th to toggle showReturned and update the filteredResults on the page.

This doesn't seem to be happening however as a change in the query param doesn't automatically trigger callbacks like refreshing the model or in this case, updating the filteredResults.

How do I get a click on the status th to update the filteredResults on the page?

export default Ember.ArrayController.extend({                      
  showReturned: false,                                             
  queryParams: ['showReturned'],                                   
  filteredResults: function() {                                    
    var articles = this.get('model');                              
    var showReturned = this.get('showReturned');                   
    if (showReturned) {                                            
      return articles;                                             
    } else {                                                       
      return articles.filterBy('state', 'borrowed');               
    }                                                              
  }.property('model.@each.state'),                                 
  actions: {                                                       
    setShowReturned: function() {                                  
      this.toggleProperty('showReturned');                             
      return false;                                                
    }                                                              
  }                                                                
});                                                                

<thead>                                           
  <tr>·                                           
    <th>Description</th>·                         
    <th>Notes</th>·                               
    <th>Borrowed since</th>                       
    <th {{action "setShowReturned"}}> Status</th> 
    <th></th>                                     
  </tr>                                           
</thead>                                          

Answer 1

FYI there's a standard property for what you call filtered results--arrangedContent if you want to use that.

You did not include the queryParam as a dependency:

filteredResults: function() {                                    
  ....
}.property('model.@each.state', 'showReturned'),