vendredi 5 juin 2015

Ember handlebars doesn't recognize a RecordArray that was passed

I'm fighting with a reading-list Ember app. Basically, I'm looping on the books handlebar over a RecordArray called model, that according to Ember doesn't exist.

This is the code:

Router.map(function() {
  this.route('index', {path: '/'});
  this.resource('books');
  this.route('show', {path: '/books/:book_id'});
  this.route('reviews', function() {
    this.route('new');
  });
  this.route('genre', {path: '/genres/:genre_id'});
});

books.hbs

<ul class="list-unstyled books">
    {{#each model as |book|}}
      {{book-details book=book}}
    {{/each}}
</ul>


{{outlet}}

book.js router

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      model: this.store.find('book'),
      authors: this.store.find('author'),
      genres: this.store.find('genre')
    })
  }
});

books.js controller

import Ember from 'ember';

export default Ember.Controller.extend({
  model: function() {
    return this.get('model.model');
  }.property('model.model'),
  genres: function() {
    return this.get('model.genres');
  }.property('model.genres'),
  authors: function() {
    return this.get('model.authors');
  }.property('model.authors')
});

When visiting /books the app doesn't work and it displays to the console:

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed {model: <DS.RecordArray:ember434>, authors: <DS.RecordArray:ember444>, genres: <DS.RecordArray:ember454>}

It makes no sense. It is complainig about each not looping over an Array, but it recognizes model as a RecordArray. I need to use model as the name of the array because I also call all of these controllers/routes/templates from other parts of app using render

Thanks




Aucun commentaire:

Enregistrer un commentaire