Displaying an ArrayController in a CollectionView


#1

I’m trying to display the items in an ArrayController using the simple example in the API docs, but with sorting enabled. So far I’ve got this: https://gist.github.com/mjijackson/222cd4105fc516d9f9a4

However, when I run the page I get the following error:

Assertion failed: an Ember.CollectionView’s content must implement Ember.Array. You passed <(generated application controller):ember190>

My understanding is that the CollectionView is created dynamically when I use the each helper in the template. Since the content of my ArrayController is an array, I’m not sure why the CollectionView is complaining.

What am I doing wrong?


#2

I’ve found one problem.

In your view the controller variable is referring to the controller from where the view is rendered. So in the view controller is the application controller “(generated application controller)” Rename your controller var to something else and the error message is gone.

But there still a problem, the ul is empty and I don’t know why.

PS: I forked the gist to show you the modification and I also added some debug directives in application creation.


#3

Thank you. I’ve renamed the variable and you’re absolutely right, the error message goes away. I’m digging into the problem again right now to see if I can figure out why the list isn’t rendering.


#4

What I’ve said previously was a little bit wrong :disappointed: (I’m still a newbie with ember) If the error message was gone it’s because the new controller var ‘myController’ in template is null. The template doesn’t know anything about variables outside of the controller that they are rendered from. So myController is unknown.

I’ve pushed a new revision of the gist but a working one this time. :wink:

Basically I’ve put objects in App namespace and explicitly define IndexController and put data in it.


#5

Ah, perfect. Thank you so much. Seems obvious in retrospect. I wasn’t putting any data in the route!


#6

I took it one step further and separated the data out into the computed “model” property of the route instead of putting it directly in the controller.

I’m just learning as well so this exercise has been very helpful. Thanks again!

EDIT: I just noticed that the sorting isn’t actually working. Any idea why?

EDIT: Oh, interesting. The one change that I made to your example broke mine. I used {{#each model}} instead of just plain {{#each}} or {{#each this}}. I guess that made the template pull directly from the model property instead of from the array controller which is responsible for the sorting.