Question

我是Backbone的新手，我正在尝试从教程中提交表单。

我一直收到以下错误：

未捕获的TypeError：无法调用未定义的方法'add'

代表行this.collection.add( book );

我需要纠正什么？

的JavaScript：

App.Views.AddBook = Backbone.View.extend({
    events: {
        'click #add': 'submit'
    },
    submit: function(e) {
        e.preventDefault();

        var formData = {};

        $('#addBook div').children('input').each(function(i, el) {
            if($(el).val() !== '') {
                formData[ el.id ] = $(el).val();
            }
        });

        var book = new App.Models.Book( formData );

        this.collection.add(book);
    }
});

var booksCollection = new App.Collections.Books([
    {
        title: 'JS: The Good Parts',
        author: 'Douglas Crockford',
        releaseDate: '2008'
    },
    {
        title: 'The Little Book on CoffeeScript',
        author: 'Alex MacCaw',
        releaseDate: '2012'
    }
]);

var addBook = new App.Views.AddBook({ el: $('#addBook') });

HTML：

<form id="addBook" action="#">
    <div>
        <label for="title">Title: </label><input id="title" type="text" />
        <label for="author">Author: </label><input id="author" type="text" />
        <label for="releaseDate">Release date: </label><input id="releaseDate" type="text" />
        <br>
        <button class="btn" id="add">Add</button>
    </div>
</form>

Answer 1

您需要将booksCollection传递给您的观点，如下所示：

var addBook = new App.Views.AddBook({ 
    collection: booksCollection,
    el: $('#addBook') 
});

如果不这样做，则不会定义视图上下文中的this.collection，这就是您收到该错误的原因。视图初始化中的collection参数非常特殊，因为Backbone会将其分配给视图中的this.collection。

骨干表单提交错误

的JavaScript：

HTML：

1 个答案: