I am currently working on the TodoMVC tutorial for Ember and I have hit a roadblock. Specifically, I have defined 2 controllers. Here is my todos.js file:
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();
}
}
})
And here is my todo.js file:
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')
});
Next, let me show you my routes/todos.js file:
import Ember from "ember";
export default Ember.Route.extend({
model: function() {
return this.store.find("todo");
}
});
Finally, I also have todos.hbs file:
<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 seems to be set up correctly, but I keep encountering 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
Can someone point out what mistake I might be making here?