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

Question

「Uncaught TypeError: Object [object Object] has no method 'create'」というエラーが表示されるのはなぜですか?

私は、このバックボーンの todo サンプル コードに近づけるように努めました。

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

});

---

私はそこに2つの間違いがありました：

1. ToDoList を Collection ではなく Model として定義
2. コレクションで add() の代わりに save() を使用すると、存在しない URL のハントがトリガーされました

ここで私が達成したかったことの実用的なコードは次のとおりです。

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

ToDoListBackbone.Model を拡張しているためのようです。Backbone.Collection を拡張する必要があります。

これを修正するコードは次のとおりです。

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