Fairly straight-forward Ember question here, (I hope!).
I have a simple Ember-data setup. One App has many Versions. Here’s my App model:
App.App = DS.Model.extend({
name: DS.attr('string'),
publicKey: DS.attr('string'),
versions: DS.hasMany('App.Version', { key: 'version_ids' })
});
My router is fairly simple:
App.Router = Ember.Router.extend({
location: 'hash',
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
redirectsTo: 'dashboard'
}),
dashboard: ...,
app: Ember.Route.extend({
route: '/:app_id',
connectOutlets: function(router, app) {
router.get('applicationController').connectOutlet('appTest', app);
},
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router) {
appTestController = router.get('appTestController');
appTestController.connectOutlet('addCommentOutlet', 'addComment', {});
appTestController.connectOutlet('versions', appTestController.get('content.versions'));
}
})
})
})
});
And the views and controllers look like this:
App.AppTestView = Ember.View.extend({
templateName: 'app_test'
});
App.VersionsView = Ember.View.extend({
templateName: 'versions'
});
App.AppTestController = Ember.ObjectController.extend({
});
App.VersionsController = Ember.ArrayController.extend({
});
When I run it unfortunately I get the error: an Ember.CollectionView's content must implement Ember.Array. You passed <App.Version:ember519>.
Interestingly, if I add brackets around [appTestController.get('content.versions')] in the router it doesn’t complain and creates an array with the first Version object correctly. But it doesn’t seem to want to show more than one object.
Any tips?
In the end, it wasn’t the models, view objects or controllers! It wasn’t even the router.
It was
versions.handlebars. I had a loop within a loop in my template, as below:I’d incorrectly written:
… where I’d meant to write:
🙂 That explains the error message. Hope this helps somebody else!