New Twiddle

components.list-cmp.js

import Ember from 'ember';

export default Ember.Component.extend({
  choice: null,  
  sortAscending: true,
  sortProperties: ['id'],
  sortedItems: Ember.computed.sort('visits', 'sortProperties'),


  // Ember.computed.sort('visits',
  //   function(itemA, itemB) {
  //     let searchTerm = this.get('query');
  //     if (itemA < itemB) {
  //       return 1;
  //     } else if (itemA > itemB) {
  //       return -1;
  //     }
  //     return 0;
  //   }).property('searchTerm'),



  setDefaultChoice: function() {
    this.set('choice', this.get('visits').get('firstObject').visitId);

    //this.set('choice', this.get('sortedItems').get('firstObject').visitId);
  }.on('init'),

  actions: {
    selectVisit: function(itemIndex, visitId) {
      this.set('choice', visitId);
      this.set('selectedMenuIndex', itemIndex);
      this.set('model.visitId', visitId);
    },
   
    sortBy: function(sortProperty) {
      if(sortProperty == this.get('sortProperties')[0]) {
        this.toggleProperty('sortAscending');
      }else {
        this.set('sortAscending', true);
      }
      this.set('sortProperties', [sortProperty]);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.visit-list.js

import Ember from 'ember';

export default Ember.Controller.extend({
  visits: [{
      date: "01/01/2016",
      location: "Denver"
  	}, {
      date: "03/12/2016",
      location: "New York"
  	}, {
      date: "06/04/2016",
      location: "St. Louis"
  	}, {
      date: "01/21/2017",
      location: "San Francisco"
  	}]
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.list-cmp.hbs

{{#filter-content content=visits properties="date location" as |fc query|}}
  
  {{input class="form-control hca-form--lg hca-query-input"
     id="visitKeyword"
     name="visitKeyword"
     value=query
     placeholder="Enter a keyword"}}        

    <div class="results">
      {{#if (not query '')}}
        <small aria-live="polite">
          Showing {{visits.length}} results below
        </small>
      {{else}}
        <small class="{{if query '' 'invisible'}}" aria-live="polite">
          {{#if (eq fc.length 0)}}
            Sorry, there are no results matching your search. Please try again.
          {{else}}
            Showing {{fc.length}} results matching
            <strong>"{{query}}"</strong>
          {{/if}}
        </small>
      {{/if}}
    </div>
    <hr>
  </div>

 
    <div class="table-responsive">
      <table class="table">
      <caption class="sr-only">List of visits</caption>
        <thead>
          <tr>
            <td></td>
            <th scope="col" {{action 'sortBy' 'date'}}>DATE</th>
            <th scope="col" {{action 'sortBy' 'location'}}>LOCATION</th>            
          </tr>
        </thead>
        <tbody id="visits">

        {{#each fc as |visits index|}}        
          <tr class="{{active-class choice visits.visitId}}" {{action "selectVisit" index visits.visitId}}>
            <td scope="row">
              <label for={{visit.visitId}} class="sr-only">Visit</label>
                {{radio-button-cmp
                name="visitRadio"
                id=visit.visitId
                class="radio-inline"
                value=visit.visitId
                checked=choice}}
            </td>
            <td>
              {{visit.date}}
            </td>
            <td>
              {{visit.location}}
            </td>            
          </tr>
        {{/each}}      

        </tbody>
      </table>
    </div>

{{/filter-content}}

templates.visit-list.hbs

{{list-cmp model=model visits=visits}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}