Backbone.js和FormData

Question

有没有办法使用Backbone.js和它的模型架构，我可以将formdata对象发送到服务器？我遇到的问题是Backbone发送的所有内容都被编码为JSON，因此formdata对象未正确发送（显然）。

我正在通过制作一个直接的jQuery ajax请求并将formdata对象作为数据属性来暂时解决这个问题，但这不太理想。

Answer 1

这是一个覆盖sync方法的解决方案，我用它来上传文件。

在这种情况下，我会覆盖模型的sync方法，但这也可以是Backbone.sync方法。

var FileModel = Backbone.Model.extend({

  urlRoot: CMS_ADMIN_URL + '/config/files',

  sync: function(method, model, options){

    // Post data as FormData object on create to allow file upload
    if(method == 'create'){
      var formData = new FormData();

      // Loop over model attributes and append to formData
      _.each(model.attributes, function(value, key){
        formData.append(key, value);
      });

      // Set processData and contentType to false so data is sent as FormData
      _.defaults(options || (options = {}), {
        data: formData,
        processData: false,
        contentType: false
      });
    }
    return Backbone.sync.call(this, method, model, options);
  }
});

修改

要跟踪上传进度，您可以为选项添加xhr选项：

...

_.defaults(options || (options = {}), {
  data: formData,
  processData: false,
  contentType: false
  xhr: function(){
    // get the native XmlHttpRequest object
    var xhr = $.ajaxSettings.xhr();
    // set the onprogress event handler
    xhr.upload.onprogress = function(event) {
      if (event.lengthComputable) {
        console.log('%d%', (event.loaded / event.total) * 100);
        // Trigger progress event on model for view updates
        model.trigger('progress', (event.loaded / event.total) * 100);
      }
    };
    // set the onload event handler
    xhr.upload.onload = function(){
      console.log('complete');
      model.trigger('progress', 100);
    };
    // return the customized object
    return xhr;
  }
});

...

Answer 2

只是为这个问题添加一个答案，继续我如何去做而不必覆盖sync：

在我看来，我有点像：

$('#' + $(e.currentTarget).data('fileTarget')).trigger('click').unbind('change').bind('change', function(){
    var form_data = new FormData();
    form_data.append('file', $(this)[0].files[0]);
    appManager.trigger('user:picture:change', form_data);
});

然后在执行此操作的控制器中触发一个函数：

var picture_entity = new appManager.Entities.ProfilePicture();
picture_entity.save(null, {
    data: data,
    contentType: false,
    processData: false,
});

此时，我正在使用我的data对象覆盖jQuery的FormData。

Answer 3

我有类似的要求，这就是我所做的：

在视图中：

var HomeView = Backbone.View.extend({
    el: "#template_loader",
    initialize: function () {
        console.log('Home View Initialized');
    },
    render: function () {
        var inputData = {
            cId: cId,
            latitude: latitude,
            longitude: longitude
        };

        var data = new FormData();

        data.append('data', JSON.stringify(inputData));

        that.model.save(data, {
            data: data,
            processData: false,
            cache: false,
            contentType: false,
            success: function (model, result) {
                alert("Success");
            },
            error: function () {
                alert("Error");
            }
        });
    }
});    

希望这有帮助。

Answer 4

我有同样的问题。你可以看到我解决它的方式。

var $form = $("myFormSelector");

//==> GET MODEL FROM FORM
var model = new MyBackboneModel();
var myData = null;
var ajaxOptions = {};
// Check if it is a multipart request.
if ($form.hasFile()) {
    myData = new FormData($form[0]);
    ajaxOptions = {
        type: "POST",
        data: myData,
        processData: false,
        cache: false,
        contentType: false
    };
} else {
    myData = $form.serializeObject();
}

// Save the model.
model.save(myData, $.extend({}, ajaxOptions, {
    success: function(model, data, response) {
        //==> INSERT SUCCESS
    },
    error: function(model, response) {
        //==> INSERT ERROR
    }
}));

hasFile是一个扩展JQuery函数的自定义方法。

$.fn.hasFile = function() {
    if ($.type(this) === "undefined")
        return false;

    var hasFile = false;
    $.each($(this).find(":file"), function(key, input) {
        if ($(input).val().length > 0) {
            hasFile = true;
        }
    });

    return hasFile;
};

Answer 5

只需使用Backbone.emulateJSON = true;：http://backbonejs.org/#Sync-emulateJSON

  

将导致在模型参数下序列化JSON，并使用application / x-www-form-urlencoded MIME类型进行请求，就好像来自HTML表单一样。

Answer 6

以下所有答案都不适合我，下面是简单易行的解决方案。通过覆盖sync方法和options.contentType这样：

sync: function(method, model, options) {
    options = _.extend({
        contentType : 'application/x-www-form-urlencoded;charset=UTF-8'
    }, options);

    options.data = jQuery.param(model.toJSON());

    return Backbone.sync.call(this, method, model, options);
}