Backbone.js und FormData

Question

Gibt es eine Möglichkeit, Backbone.js und seine Modellarchitektur zu verwenden, dass ich ein Formdata-Objekt an den Server senden kann? Das Problem, auf das ich stoße, ist, dass alles, was Backbone sendet, als JSON kodiert ist, so dass das formdata-Objekt (offensichtlich) nicht richtig gesendet wird.

Ich arbeite vorübergehend um dies, indem Sie eine direkte jQuery Ajax Anfrage und einschließlich der Formdata-Objekt als Daten-Eigenschaft, aber das ist weniger als ideal.

Answer 1

einfach eine Antwort auf diese Frage hinzufügen möchten, heres, wie ich es ging, ohne die sync außer Kraft zu setzen mit:

Aus meiner Sicht habe ich somethign wie:

$('#' + $(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); 
}); 

, die dann ein Trigger Funktion in einer Steuerung, das dies tut:

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

an diesem Punkt bin ich zwingende jQuery data mit meinem FormData Objekt.

Answer 2

Ich hatte eine ähnliche Anforderung und hier ist das, was ich tat:

In Aussicht:

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"); 
      } 
     }); 
    } 
});  

Hoffnung, das hilft.

Answer 3

Hier ist eine Lösung durch Überschreiben der sync-Methode, die ich verwenden, um Dateiuploads zu ermöglichen.

In diesem Fall überschreibe ich die sync Methode des Modells, aber dies kann auch die Backbone.sync Methode sein.

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); 
    } 
}); 

EDIT:

Um Upload-Fortschritt zu verfolgen, können Sie eine xhr Option Optionen hinzufügen:

... 

_.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 4

Ich hatte das gleiche Problem. Sie können über den Weg sehen, wie ich es löse.

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 
    } 
})); 

Die hasFile ist eine benutzerdefinierte Methode, die die JQuery-Funktionen erweitert.

$.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

Gerade Backbone.emulateJSON = true; benutzen http://backbonejs.org/#Sync-emulateJSON

bewirkt, dass der JSON unter einem Modellparameter serialisiert werden, und die Anfrage mit einer Anwendung/x-www-form-urlencoded MIME-Typ hergestellt werden soll, wie aus einem HTML-Formular.

Answer 6

Keine der Antworten funktionierte für mich, unten ist einfache und einfache Lösung. Durch das Überschreiben sync Verfahren und options.contentType wie folgt aus:

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); 
} 

Answer 7

Ein einfaches sein wird, hoffen, dass dies jemand helfen.

1. ein Objekt von Backbone Modell erstellen:

   var importModel = new ImportModel(); 
   

2. Anruf speichern [POST] Methode von Backbone Modell und das Objekt Formdata Pass.

   var objFormData = new FormData(); 
   objFormData.append('userfile', files[0]); 
   
   importModel.save(objFormData, { 
   contentType: false, 
   data: objFormData, 
   processData: false, 
   success: function(data, status, xhr) { }, 
   error: function(xhr, statusStr) { } 
   });