Ember -- TypeError: arrangedContent.addArrayObserver is not a function

Question

I am trying to build a simple category browser with ember. I have two very simple views. When the user visits / they will see a list of all categories and when they click a category in that list they will be directed to #/10 where 10 is the id.

My problem is that when a user clicks on a category at the / route I am getting the following error

TypeError: arrangedContent.addArrayObserver is not a function
[Break On This Error]   

didChange: 'arrangedContentArrayDidChange'

If I refresh the page at the #/10 route the proper api call is made to my backend /api/categories?parent=99. What could I be doing wrong that is throwing this error during the transition? A full example of my code is below.

Templates:

<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="categories">
    {{#each category in controller}}
        <p>{{#linkTo 'category' category}}{{ category.name }}{{/linkTo}}</p>
    {{/each}}
</script>

<!--this is an array instead of object -->
<script type="text/x-handlebars" data-template-name="category">
    {{#each category in controller}}
        <p>{{category.name}}</p>
    {{/each}}
</script>

Javascript:

var App = Ember.Application.create();

App.Router.map(function(){
    this.resource('categories', { path : '/' });
    this.resource('category', { path : '/:category_id' });
});

App.CategoriesRoute = Ember.Route.extend({
    model: function(){
        return App.Category.find();
    }
});

//this is causing the error possibly
    App.CategoryRoute = Ember.Route.extend({
        model: function(params){
            return App.Category.find({parent: params.category_id});
        }
    });

App.CategoryController = Ember.ArrayController.extend();

// Models
App.Store = DS.Store.extend({
  revision: 11,
  adapter: 'DS.RESTAdapter'
});

DS.RESTAdapter.configure("plurals", {
  category: "categories"
});

App.Category = DS.Model.extend({
  name: DS.attr('string'),
  parent_id: DS.attr('number')
});

Debug info:

DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.0

Answer 1

Hint: After writing this i realized that you probably did not get the model hook right. This hook is called when you are entering your app via url. It converts the URL into an appropriate model and transition with this model into the Route. I guess you thought that this model() hook would be called with the arguments of {{#linkTo}}? This is not the case!

This does not work because you are passing a single model to your #linkTo helper in your template. So Ember wants to set this single object as content of your ArrayController. This causes your error. And your model hook returns an array. Rule of Thumb: You should always pass the same data structure to #linkTo, which you are returning in your model hook.

Therefore i would suggest to use an event instead of linkTo and do the following:

<script type="text/x-handlebars" data-template-name="categories">
    {{#each category in controller}}
        <p {{action 'showParentCategory' category}}>{{category.name}}</p>
    {{/each}}
</script>

App.CategoriesRoute = Ember.Route.extend({
    model: function(){
        return App.Category.find();
    },
    events: {
      showParentCategory : function(parentCategory){
        var cats = App.Category.find({parent: parentCategory.get("category_id")});
        this.transitionTo("category", cats);
      }
    }
});

What have i done here?

1. I created an action called "showParentCategory".
2. As this is an action with is about routing, i am handling this event in your CategoriesRoute. As you see, events/action handlers are declared in the events property of your route.
3. I am performing the same logic there as in your model hook and then i am calling manually the transitinTo with the fetched categories.

UPDATE: How to serialize By implementing serialize, you are telling Ember what to put into your url.

App.CategoryRoute = Ember.Route.extend({
    model: function(params){
        return App.Category.find({parent: params.category_id});
    },
    serialize : function(models){
        var first = models.objectAt(0);
        return {
            category_id : first.get("parentId")
        }
    }
});