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

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

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

коллекция: collections/pets.js

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

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

  return PetsCollection;
});

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

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


post requirejs backbone.js backbone-model
person Carlos Azaustre    schedule 30.04.2013    source источник
comment
Почему бы вам не отладить то, что происходит внутри Backbone? В большинстве случаев это самый быстрый способ решить ваши проблемы (как и в случае с любым продуктом с открытым исходным кодом).   -  person eugen-fried    schedule 30.04.2013
comment
Да, я отлаживал console.log в chrome, и var pet_data показывает полный сериализованный объект JSON формы, но метод сохранения не работает :(   -  person Carlos Azaustre    schedule 30.04.2013
comment
Спасибо @J-unior. Я заметил, что на стороне сервера нет отладки, и я уже нашел ошибку. Я счастлив сейчас :Р   -  person Carlos Azaustre    schedule 01.05.2013

Ответы (2)


arrow_upward
8
arrow_downward

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

//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() работает (сохранение на стороне сервера).

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

person Sai Chaithanya    schedule 03.05.2013
comment
После n['name'] есть лишняя скобка. - person Benjamin Sullivan; 20.12.2014
comment
@BenjaminSullivan Теперь это исправлено. Всего ушло ~2 года - person Fabio Poloni; 09.01.2016

arrow_upward
4
arrow_downward

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

person Simon Boudrias    schedule 30.04.2013
comment
Я пробовал this.getFormData(this.$el.find('form') вместо JSON.stringify(this.getFormData(this.$el.find('form') )); передать объект, и он тоже не работает. - person Carlos Azaustre; 30.04.2013
comment
Спасибо! @Simon Boudrias, этот ответ поможет мне :) - person Carlos Azaustre; 01.05.2013