Backbone.js - How to save model by form and post to server

Question

I'm n00b in BackboneJS/RequireJS and I'm developing an web app that use a RESTful API. So I've a model like this:

models/pet.js

define([
  'backbone'
], function(Backbone){

var PetModel = Backbone.Model.extend({

    urlRoot: 'http://localhost:3000/pet',
    idAttribute: '_id',

    defaults: {
        petId: "",
        type: "",
        name: "",
        picture: "",
        description: "",
        breed: "",
        size: "",
        sex: "",
        age: "",
        adopted: false,
    }
});

  return PetModel;
});

a collection: collections/pets.js

define([
  'backbone',
  'models/pet'
], function(Backbone, PetModel){

    var PetsCollection = Backbone.Collection.extend({
    url: 'http://localhost:3000/pets',
    model: PetModel,
});

  return PetsCollection;
});

And a view that renders a form to add new models (Maybe it's possible another way more elegant) views/petAddNew.js

define([
  'jquery',
  'backbone',
  'models/pet',
  'collections/pets',
  'text!templates/pet/addNew.html'
], function($, Backbone, PetModel, PetsCollection, petAddNewTemplate){

var PetAddNewView = Backbone.View.extend({

    el: $('#formAdd'),
    template: _.template(petAddNewTemplate),

    events: {
        'click #add'        : 'submitAdd',
    },

    initialize: function() {
        this.model = new PetModel();
        this.collection = new PetsCollection();
        _.bindAll(this, 'submitAdd');
    },

    render: function() {
        var view = this;
        view.$el.html( view.template );
        return view;
    },


    submitAdd: function(e) {
        //Save Animal model to server data
        e.preventDefault();
        var pet_data = JSON.stringify( this.getFormData( this.$el.find('form') ) );
        this.model.save(pet_data);
        this.collection.add(this.model);
        return false    
    },

    //Auxiliar function
    getFormData: function(form) { 
        var unindexed_array = form.serializeArray();
        var indexed_array = {};

        $.map(unindexed_array, function(n, i){
            indexed_array[n['name']] = n['value'];
        });

        return indexed_array;
    },

});

return PetAddNewView;
});

So when I submit the form I don't post any data to server. I don't know how to fix it. Any ideas? Thanks in advance!

Why wouldn't you debug what happens within Backbone? In most of the times it's the fastest way to solve your issues (as with any open source product). — eugen-fried, Apr 30 '13 at 14:51
Yeah, I debugged with console.log in chrome and the var "pet_data" shows the complete JSON object serialized of the form but the method "save" not working :( — Carlos Azaustre, Apr 30 '13 at 15:04
Thanks @J-unior I've noticed that didn't debug in server-side and I already found the bug. I'm happy now :P — Carlos Azaustre, May 01 '13 at 08:58

score 8 · Accepted Answer · edited Jan 08 '16 at 21:33

8

You need set the attributes first and then save.

//Auxiliar function
getFormData: function(form) { 
    var self = this;
    var unindexed_array = form.serializeArray();

    $.map(unindexed_array, function(n, i){
        self.model.set({
            n['name']: n['value']
        });
    });
}

Now this.model.save() works (saving on the server side).

You can see it work in a fiddle.

edited Jan 08 '16 at 21:33

Fabio Poloni

8,219
5
44
74

answered May 03 '13 at 14:06

Sai Chaithanya

708
1
7
14

There's an excess bracket after `n['name']`. – Benjamin Sullivan Dec 20 '14 at 05:34
@BenjaminSullivan It's fixed now. Just took ~2 years – Fabio Poloni Jan 08 '16 at 21:33

score 4 · Answer 2 · answered Apr 30 '13 at 15:37

4

Model.save expect an object/hash of new values, just like Model.set. Here you're passing a string as the attributes arguments.

answered Apr 30 '13 at 15:37

Simon Boudrias

42,953
16
99
134

I've tried "this.getFormData( this.$el.find('form')" instead of "JSON.stringify( this.getFormData( this.$el.find('form') ) );" to pass the object and it is not working neither. – Carlos Azaustre Apr 30 '13 at 16:35

Backbone.js - How to save model by form and post to server

2 Answers2