javascript - Backbone.js 和 FormData

Question

有没有什么方法可以使用 Backbone.js 及其模型架构将表单数据对象发送到服务器？我遇到的问题是 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;
  }
});

...