Backbone.js Uncaught TypeError: Object [object Object] has no method 'create'

Question

Why am I getting the error: "Uncaught TypeError: Object [object Object] has no method 'create' "

I have tried to stay close to this backbone todo example code.

http://jsfiddle.net/GhaPF/4/

$(document).ready(function() {

    var ToDo = Backbone.Model.extend({
        defaults: { "date": "today",
                    "task": ""
                },
        initialize: function() {}
    });

    var ToDoList = Backbone.Model.extend({
        model: ToDo
    });

    var ToDoListView = Backbone.View.extend({
        el: 'body',
        initialize: function(myTodoList) {
            this.todolist = myTodoList;
            this.todolist.bind('change', this.render, this);
        },
        render: function() {
            text = this.todolist.toJSON();
            string = JSON.stringify(text);
            $(this.el).append(string);
            return this;
        },
        events: {
            "keypress #new-todo":  "createOnEnter"
        },
        createOnEnter: function(e) {
          if (e.keyCode != 13) return;
          if (!$("#new-todo").val()) return;
          this.todolist.create({"task": $("#new-todo").val()});
          $("#new-todo").val('');
        }
    });

    var todolist = new ToDoList();
    var myToDoListView = new ToDoListView(todolist);

});

---

I had two mistakes in there:

1. defined ToDoList as a Model instead of a Collection
2. used save() instead of add() on the collection, this triggered the hunt for a URL which did not exist

Here is a working code for what I wanted to achieve here:

$(document).ready(function() {

    var ToDo = Backbone.Model.extend({
        defaults: { "date": "today",
                    "task": ""
                },
        initialize: function() {}
    });

    var ToDoList = Backbone.Collection.extend({
        model: ToDo
    });

    var ToDoListView = Backbone.View.extend({
        el: 'body',
        initialize: function(myTodoList) {
            this.todolist = myTodoList;
            this.todolist.bind('add', this.render, this);
        },
        render: function() {
            text = this.todolist.toJSON();
            string = JSON.stringify(text);
            $(this.el).append(string);
            return this;
        },
        events: {
            "keypress #new-todo":  "createOnEnter"
        },
        createOnEnter: function(e) {
          if (e.keyCode != 13) return;
          if (!$("#new-todo").val()) return;
          this.todolist.add({"task": $("#new-todo").val()});
          //this.render();
          $("#new-todo").val('');
        }
    });

    var todolist = new ToDoList();
    var myToDoListView = new ToDoListView(todolist);

});

Answer 1

It looks like it is because your ToDoList is extending Backbone.Model. It should be extending Backbone.Collection.

Here's the code to fix it.

var ToDoList = Backbone.Collection.extend({
  model: ToDo,
  url: '/todos' 
});