Backbone.js - Come salvare il modello per modulo e inviare al server

Question

Sono n00b in BackboneJS/RequireJS e sto sviluppando un'app Web che utilizza un'API RESTful. così ho un modello come questo:

modelli/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; 
}); 

una collezione: collezioni/pets.js

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

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

    return PetsCollection; 
}); 

e una vista che rende un modulo per aggiungere nuovi modelli (Forse è possibile un altro modo più elegante) visualizzazioni/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; 
}); 

Così quando invio il modulo non invio alcun dato al server. Non so come aggiustarlo. Qualche idea? Grazie in anticipo!

Answer 1

È necessario impostare prima gli attributi e quindi salvare.

//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'] 
     }); 
    }); 
} 

Ora this.model.save() funziona (risparmio sul lato server).

Si può vedere che funziona in un fiddle.

Answer 2

Model.save aspettarsi un oggetto/hash di nuovi valori, proprio come Model.set. Qui stai passando una stringa come argomento degli attributi.