问题 Backbone.js - 如何通过表单保存模型并发布到服务器


我在BackboneJS / RequireJS中是n00b,我正在开发一个使用RESTful API的Web应用程序。 所以我有一个这样的模型:

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

因此,当我提交表单时,我不会将任何数据发布到服务器。我不知道如何解决它。 有任何想法吗?提前致谢!


10500
2018-04-30 14:42


起源

为什么不调试Backbone中发生的事情?在大多数情况下,这是解决问题的最快方法(与任何开源产品一样)。 - yevgeniy mordovkin
是的,我用chrome中的console.log进行了调试,var“pet_data”显示了表单序列化的完整JSON对象,但方法“保存”不起作用:( - Carlos Azaustre
谢谢@ J-unior我注意到在服务器端没有调试,我已经发现了这个bug。我现在很开心:P - Carlos Azaustre


答案:


您需要先设置属性然后保存。

//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() 工作(在服务器端保存)。

你可以看到它的工作原理 小提琴


8
2018-05-03 14:06



也可以参考 jsfiddle.net/nikoshr/4ArmM - Sai Chaithanya
之后有一个多余的支架 n['name']。 - Benjamin Sullivan
@BenjaminSullivan现在已经修好了。刚花了〜2年 - Fabio Poloni


Model.save 期待一个新值的对象/哈希,就像 Model.set。在这里,您将传递一个字符串作为属性参数。


4
2018-04-30 15:37



我试过“this.getFormData(this。$ el.find('form')”而不是“JSON.stringify(this.getFormData(this。$ el.find('form')));”传递对象,它不工作。 - Carlos Azaustre
谢谢! @Simon Boudrias这个答案帮帮我:) - Carlos Azaustre