CODEWITHSUNDEEP
javascriptarraysember.jstodomvc
rreyes1979
rreyes1979

Reputation: 1945

Assertion Failed: The value that #each loops over must be an Array error. What am I doing wrong?

I am following Ember's TodoMVC tutorial and I am stuck. Basically, I defined 2 controllers. This is todos.js

import Ember from "ember";

export default Ember.ArrayController.extend({
    actions:{
        createTodo: function(){
            var title = this.get("newTitle");

            if(!title){
                return false;
            }
            if(!title.trim()){
                return;
            }

            var todo = this.store.createRecord("todo", {
                title: title,
                isCompleted: false
            });

            // Clear text field
            this.set('newTitle', '');

            todo.save();
        }
    }
})

This is todo.js

import Ember from "ember"

export default Ember.ObjectController.extend({
    isCompleted: function(key, value){
        var model = this.get("model");

        if(value === undefined){
            return model.get("isCompleted");
        } else {
            model.set('isCompleted', value);
            model.save();
            return value;
        }
    }.property('model','model.isCompleted')
});

Here is routes/todos.js

import Ember from "ember";

export default Ember.Route.extend({
    model: function() {
        return this.store.find("todo");
    }
});

Finally, also defined todos.hbs

<ul id="todo-list">
    {{#each todo in model itemController="todo"}}
        <li {{bind-attr class="todo.isCompleted:completed"}}>
            {{input 
            type="checkbox"
            class="toggle"
            checked=todo.isCompleted
            }}
            <label>{{todo.title}}</label><button class="destroy"></button>
        </li>
    {{/each}}
</ul>

Everything looks good, but I am getting the following error in the console:

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed todomvc-embercli@controller:array:, but it should have been an ArrayController

What am I doing wrong here?

Upvotes: 2

Views: 479

Answers (2)

Flobin
Flobin

Reputation: 708

As per turboMaCk's comment, removing ember-disable-proxy-controllers from package.json seems to fix the issue.

Upvotes: 1

GJK
GJK

Reputation: 37369

This issue was just reported yesterday on the Ember GitHub page. It seems to be a bug with Ember and I don't know of a workaround. However, it does mention that you can use components instead of a array and item controllers (which is the preferred method anyway). Maybe try looking at this gist that was posted in the issue.

I'll come back and update this answer if a workaround/fix is found. For now, I would say try to avoid array controllers (even though it's in the tutorial). :/

Upvotes: 0

Related Questions