I’m writing a simple app which has categories, and items contained within those categories.
App.Router.map(function() {
this.resource('index', { path: '/'});
this.resource('category', { path: '/:category_id'});
});
App.ApplicationRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('category');
}
});
App.CategoryRoute = Ember.Route.extend({
model: function (params) {
return Ember.RSVP.hash({
category: this.store.find('category', params.category_id),
items: this.store.find('item', {category: params.category_id})
});
}
});
App.Category = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
items: DS.hasMany('item', {async: true}),
});
App.Item = DS.Model.extend({
category: DS.belongsTo('category'),
name: DS.attr('string'),
description: DS.attr('string'),
url: DS.attr('string'), // typically a demo URL. NOT the repo URL.
repository: DS.attr('string')
});
When a category loads I retrieve a list of items from the server. This is currently working, but for some reason is passing a query string instead of hitting an API endpoint directly. I would prefer this /api/items/videos
but I’m getting this /api/items?category=videos
. I’ve got the relevant bits of my code posted above. I’ve changed this line this.store.find('item' ...)
, passing just the category_id raw (instead of in an object). While that does work to call the endpoint as I desire, it throws an error:
Assertion Failed: The value that #each loops over must be an Array. You passed '<App.Item:ember410:1>' (wrapped in (generated _items controller))
The data being returned from the server is identical in both cases:
{
"items": [
{
"url": "http://cnn.com",
"description": "An example of a video link",
"id": 1,
"name": "CNN Video"
}
]
}
What am I doing wrong?