Question

How do I create a registration form in Backbone js? And send a POST to my backend, I don’t understand the idea of a collection in such situation.

What I got so far:

define(['jQuery', 'Underscore', 'Backbone', 'text!templates/signup.html', 'models/UserRegistration'],
function($, _, Backbone, signUpTemplate, UserRegistration){

    var SignUpView = Backbone.View.extend({
        el: $('#screen'),

        events: {
            'submit #frm-signup': 'signup'
        },

        signup: function(){
            // Do something
        },

        render: function(){
            $(this.el).html(_.template(signUpTemplate, {}));
            return this;
        }
    });

    return new SignUpView;
});

And a model:

define(['Underscore', 'Backbone'],
function(_, Backbone){

    var UserRegistration = Backbone.Model.extend({
        url: '/users/reg',
        paramRoot: 'user',
        defaults: {
            'fullname': '',
            'email': '',
            'password': ''
        }
    });

    return UserRegistration;
});

What would be the next step to make it POST to my REST backend server?

Answer 1

Backbone.Model sends a POST to the server when you call it’s save function. So, assuming you’ve already populated the model from your form when you call signup, then it’s just a case of calling save:

signup: function(){
            this.model.save();
        },

Alternatively you can pass the details to save into the save function:

signup: function(){
            this.model.save({
                      fullname: $( '#fullname' ).val(),
                      email : $( '#email' ).val()
                      ...
                      });
        },

It’s maybe worth noting that you’ll need to create the model on the view at some point as well (which your code currently doesn’t seem to do).

So, when you create the view:

new SignUpView({ model: new UserRegistration });