// templates/schedule/index.hbs

 <div class="row">
    {{#each filteredList as |schedule|}}
      <div class="col-md-4">
        {{#schedule-item item=schedule}}
          Venue: {{schedule.venue}} Date: {{schedule.date}}
        {{/schedule-item}}
      </div>
    {{else}}
      {{#if model.isUpdating}}
        {{spinner-cube}}
      {{else}}
        <div class="col-md-12 text-center">
          <div class="alert alert-info">
            Sorry, no result.
          </div>
        </div>
      {{/if}}
    {{/each}}
  </div>

// templates/components/schedule-item.hbs
<div class="panel panel-default schedule-item">
  <div class="panel-heading">
    <h3 class="panel-title">{{item.game}} - {{item.home}} v {{item.away}}</h3>
  </div>
  <div class="panel-body">
    <p>Details of the upcoming game</p>
  </div>
  <div class="panel-footer">
    {{yield}}
  </div>
</div>

// controller/schedule.js

import Ember from 'ember';

export default Ember.Controller.extend({

  queryParams: ['filter', 'limit', 'team'],
  filter: '',
  team: '',
  limit: 'all',

  limitAll: Ember.computed.equal('limit', 'all'),

  filteredList: Ember.computed('model.@each.game', 'filter', function() {

    let results = this.get('model');
    const query = this.get('filter');

    if (!!query) {
      const regexString = '(' + query.split(' ').join(')+.*(') + ')+.*';
      const regex = new RegExp(regexString, 'ig');

      results = results.filter((item) => item.get('game').match(regex));
    }

    return results.sortBy('game');
  })

});

// model/schedule.index.js
import Ember from 'ember';

export default Ember.Route.extend({

  queryParams: {
    limit: { refreshModel: true, as: 'schedule' },
    team: { refreshModel: true, as: 'other-team' },
  },

  model(params) {

    if (params.limit === 'all') {
      return this.store.findAll('schedule');
    }

    return this.store.query('schedule', {
      orderBy: 'name',
      startAt: params.team,
      endAt: params.letter+"uf8ff"
    });
  }

});