Route does not provide model correctly (filtered array)

I'm new to Ember and JS frameworks in general and I'm bulding my first toy app. I'm having a problem with one particular thing I have to implement. My toy app consists of the following routes and models:

Router.map(function() {
  this.resource('books', {path: '/'});
  this.resource('book', {path: '/books/:book_id'});
  this.resource('genre', {path: '/genres/:genre_id'});
});

export default DS.Model.extend({
  title: DS.attr('string'),
  author: DS.attr('string'),
  genre: DS.belongsTo('genre', {async: true}),
  review: DS.attr('string'),
  rating: DS.attr('number'),
  amazon_id: DS.attr(),
  url: function() {
    return "http://ift.tt/1dxqOig"+this.get('amazon_id')+"/adamfortuna-20";
  }.property('amazon_id'),
  image: function() {
    return "http://ift.tt/1jR9irZ"+this.get('amazon_id')+".01.ZTZZZZZZ.jpg";
  }.property('amazon_id')
})

export default DS.Model.extend({
  name: DS.attr('string'),
  books: DS.hasMany('book', {async: true})
})

I want the path /genres/:genre_id to generate me a model that is an array with every book of a particular genre:

export default Ember.Route.extend({
  model: function(params) {
    return this.store.filter('book', function(book) {
      return book.get('genre') === params.genre_id
    });
  }
});

This is my genre.hbs template:

<h2> Books </h2>
<ul class="list-unstyled">
  {{#each}}
    {{book-details book=this tag='li' class='row'}}
  {{/each}}
</ul>

Nothing gets rendered and the console returns:

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed '<DS.FilteredRecordArray:ember466>' (wrapped in (generated genre controller))

Any help would be really appreciated. Thanks