Backbone.js - Как сохранить модель по форме и отправить на сервер

Question

Я n00b в BackboneJS/RequireJS, и я разрабатываю веб-приложение, использующее API RESTful. Так что я модель, как это:

модели/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; 
}); 

собранием: коллекции/pets.js

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

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

    return PetsCollection; 
}); 

и вид, который визуализирует форма для добавления новых моделей (возможно, это возможно еще более элегантно) просмотров/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; 
}); 

Поэтому, когда я отправляю форму, я не размещаю никаких данных на сервере. Я не знаю, как это исправить. Любые идеи? Заранее спасибо!

Answer 1

Сначала вам необходимо установить атрибуты, а затем сохранить.

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

Сейчас this.model.save() работы (сохранение на стороне сервера).

Вы можете видеть, как это работает в fiddle.

Answer 2

Model.save ожидать объект/хэш новых значений, точно так же как Model.set. Здесь вы передаете строку как аргументы атрибутов.