Backbone.js - Wie man ein Formular per Formular speichert und auf den Server schreibt

Question

Ich bin N00b in BackboneJS/RequireJS und ich entwickle eine Web App, die eine RESTful API verwendet. Also habe ich ein Modell wie folgt aus: Sammlungen/pets.js

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

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

    return PetsCollection; 
}); 

Und eine Ansicht, die macht:

models/

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

eine Sammlung pet.js ein Formular, um neue Modelle hinzufügen (Vielleicht ist es möglich, eine andere Art und Weise eleganter) Aufrufe/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; 
}); 

Also, wenn ich das Formular absende, poste ich keine Daten zum Server. Ich weiß nicht, wie ich es beheben soll. Irgendwelche Ideen? Danke im Voraus!

Answer 1

Sie müssen zuerst die Attribute festlegen und dann speichern.

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

Jetzt this.model.save() Werke (auf der Serverseite zu speichern).

Sie können es in einem fiddle arbeiten sehen.

Answer 2

Model.save erwarten ein Objekt/Hash der neuen Werte, genau wie Model.set. Hier übergeben Sie eine Zeichenfolge als Attributargumente.