Question

I’m experimenting for the first time with backbone.js and I have a very simple Grails application with a single domain called Book. Things seem to be working well however, I’ve noticed that when I POST the data from the form to the server backbone then does a GET to the server with the ID of the new record. However, the POST returns the results as JSON and populates the table accordingly. I’m not sure I understand the need for the GET following the POST or how to stop this from happening.

$(function() {

    // Model

    window.Book = Backbone.Model.extend({
                url: function() {
                    return this.id ? '/BackboneTest/books/' + this.id : '/BackboneTest/books.json';
                },

                defaults: { book: {
                    title: 'None entered',
                    description: 'None entered',
                    isbn: 'None entered'
                }},

                initialize: function() {
                    // can be used to initialize model attributes
                }

            });

    // Collection

    window.BookCollection = Backbone.Collection.extend({

                model: Book,
                url: '/BackboneTest/books.json'

            });

    window.Books = new BookCollection;

    //View

    window.BookView = Backbone.View.extend({

                tagName: 'tr',

                events: {
                    // can be used for handling events on the template
                },

                initialize: function() {

                    //this.render();

                },

                render: function() {
                    var book = this.model.toJSON();
                    //Template stuff
                    $(this.el).html(ich.book_template(book));
                    return this;
                }



            });

    // Application View

    window.AppView = Backbone.View.extend({

                el: $('#book_app'),

                events: {
                    "submit form":"createBook"
                },

                initialize: function() {
                    _.bindAll(this, 'addOne', 'addAll');

                    Books.bind('add', this.addOne);
                    Books.bind('refresh', this.addAll);
                    Books.bind('all', this.render);

                    Books.fetch();
                },

                addOne: function(book) {
                    var view = new BookView({model:book});
                    this.$('#book_table').append(view.render().el);
                },

                addAll: function() {
                    Books.each(this.addOne);
                },

                newAttributes: function(event) {
                    return { book: {
                        title: $('#title').val(),
                        description: $('#description').val(),
                        isbn: $('#isbn').val()
                    }  }
                },

                createBook: function(e) {
                    e.preventDefault();
                    var params = this.newAttributes(e);
                    Books.create(params)
                    //TODO clear form fields
                }
            });

    // Start the backbone app
    window.App = new AppView;
});

Answer 1

I’ve determined that the cause of this was server side. Because of some scaffolded code that got generated for testing purposes, on the save, there was an additional redirect which resulted in a 302. This caused the GET after the POST. Once I cleaned up the server side code, I only get the POST, as expected.