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.

$(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:

defined ToDoList as a Model instead of a Collection
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);

});

Paul · Accepted Answer · 2012-09-05 14:06:27Z

2

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' 
});

edited Sep 5, 2012 at 14:06

answered Sep 5, 2012 at 13:34

Paul

18.6k7 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Timothée HENRY Over a year ago

Ah correct! Thanks. But now I have another error: "Uncaught Error: A "url" property or function must be specified". jsfiddle.net/GhaPF/5

Paul Over a year ago

Since the create function saves the model to the server, you have to add the url propert to the collection so it knows what url to call on the server to add a model. See the url documentation: backbonejs.org/#Collection-url

Timothée HENRY Over a year ago

Thank you! I confused save() with add().

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related