How to add data from HTML-form to database, using Backbone?

Question

I`ve got next problem - I need to insers data from HTML form to my server (Python Flask). But it seems like nothing happens and do not working. What I'm doing wrong? Maybe something bad with my Models?

My code: Model:

define(["underscore", "backbone", "jquery"],

    function(_, Backbone, $) {
        return Backbone.Model.extend({

            urlRoot: "/adduser",

            defaults: {
                "email": "",
                "f_name": "",
                "id_role": 0,
                "l_name": "",
                "login": "",
                "password": "",
                "status": 1
            }
        });
    });

View:

define([
        "underscore",
        "backbone",
        "jquery",
        "text!pages/RestaurantPage/templates/AdminTemplate.html",
        "pages/RestaurantPage/models/User"

    ],

    function(_, Backbone, $, AdminTemplate, User) {
        return Backbone.View.extend({

            events: {
                events: {
                    'submit #new_user': 'save'
                }
            },

            initialize: function() {
                this.collection = new User();
                this.collection.on("change", this.collection.save());
            },

            el: $('#content'),

            save: function(e) {
                alert('ok"');
                var userInfo = {
                    email: this.$('#email').val(),
                    l_name: this.$('#l_name').val(),
                    f_name: this.$('#f_name').val(),
                    login: this.$('#login').val(),
                    password: this.$('#password').val(),
                    id_role: this.$('#id_role').val(),
                    status: this.$('#status').val()

                };
                this.collection.save(userInfo);

            },
            render: function() {

                this.$el.html(AdminTemplate);

            }
        });
    });

My form have id "new_user" and same fields as in model.

UPD: thanks to all! I got how to do that!

Answer 1

There are a few oddities in your view's code. Inside initialize() , you're calling this.collection.on() with a call to the model's save() function. When using this.collection.on() , you need to pass in a reference to the save function itself, not a call to the function ( save() ).

I am also guessing you mean to call the save function on the view, not the model. I updated the code to do that here:

define([
        "underscore",
        "backbone",
        "jquery",
        "text!pages/RestaurantPage/templates/AdminTemplate.html",
        "pages/RestaurantPage/models/User"

    ],

    function(_, Backbone, $, AdminTemplate, User) {
        return Backbone.View.extend({

            // ...

            initialize: function() {
                this.collection = new User();
                // Pass in a reference to the save function
                this.collection.on("change", this.save, this);
            },

            // ...
        });
    });

Answer 2

By mistake, you've defined events twice & within each other.

Any console errors ? & change the definition to include only one events definition like below :

 return Backbone.View.extend({
            events: {
                'submit #new_user': 'save'
            },
            initialize: function() {
   //... remaining stuff goes here