2016-05-24 2 views
0

Ich erstelle eine Crud Web App mit Backbone. Ich schreibe die Funktionalität, um eine Ressource (PUT) zu aktualisieren. Ich versuche dies zu erreichen, indem ich eine Modelleigenschaft vom Server (siehe SubscriberView) abrufe und die Ressource erfolgreich abhole, um eine SubscriberEditView zu instanziieren, wodurch das neu geholte Modell übergeben wird. Bis jetzt funktioniert das wie erwartet; SubscriberEditView rendert ein HTML-Formular, das mit den Modellinstanzeigenschaften gefüllt wird. Wenn ich einen neuen Login-Wert in das Formular eintrage, kann ich die Update-Funktion auslösen, die erfolgreich eine PUT-Anfrage an die Server-Ressource stellt und die Model-Instanz wie erwartet aktualisiert. Das Problem ist jedoch, dass, wenn ich diesen Prozess dann mit einer anderen Modellinstanz wiederhole, die PUT-Anfrage gegen das aktuelle Modell UND das zuvor instanziierte Modell gestellt wird. Ist der Grund dafür, dass ich jetzt zwei Instanzen von SubscriberEditView habe? Oder ist es etwas anderes, das ich vermisst/missverstanden habe?Wie kann ich verhindern, dass die Methode "Backbones save" versucht, jedes Modell zu aktualisieren?

Siehe unten den beschriebenen Code.

// The view for a single subscriber 
 
var SubscriberView = Backbone.View.extend({ 
 
\t tagName: 'tr', 
 
\t template: _.template($('#subscribers-tmpl').html()), 
 
\t initialize: function() { 
 
\t \t this.listenTo(this.model, 'destroy', this.remove); 
 
\t }, 
 
\t render: function() { \t \t 
 
\t \t var html = this.template(this.model.toJSON()); 
 
\t \t this.$el.html(html); 
 
\t \t return this; 
 
\t }, 
 
    events: { 
 
     'click .remove': 'onRemove', 
 
     'click .edit-subscriber': 'editSubscriber', 
 
    }, 
 
    editSubscriber: function() { \t 
 
    \t var getSubscriberModel = this.model.set('id', this.model.attributes.id, {silent:true}) 
 
    \t getSubscriberModel.fetch({ 
 
    \t \t success: function (model, response) { 
 
    \t \t \t $('#addSubscriber').fadeOut(); 
 
    \t \t \t new SubscriberEditView({model:model}); \t \t \t 
 
    \t \t }, 
 
    \t \t error: function (response) { 
 
    \t \t \t console.log('There was an error'); 
 
    \t \t } 
 
    \t }); 
 
    }, 
 
    onRemove: function() { 
 
     this.model.destroy(); 
 
    }  
 
}); 
 

 
// The edit view 
 
var SubscriberEditView = Backbone.View.extend({ 
 
\t tagName: 'div', 
 
\t el: '#updateSubscriber', 
 
\t template: _.template($('#subscriberEdit-tmpl').html()), 
 
\t initialize: function() { 
 
\t \t this.model.on('sync', this.render, this); 
 
\t }, 
 
\t events: { 
 
\t \t 'click #close': 'cancel', 
 
\t \t 'click .save-subscriber': 'update' 
 
\t }, 
 
\t update: function() { 
 
\t \t var $login = this.$('#login'); 
 
\t \t this.model.save({ 
 
\t \t \t login: $login.val(), 
 
\t \t }, 
 
     { 
 
\t \t \t dataType: 'text', 
 
\t \t \t success: function (model, response, options) { 
 
\t \t \t \t console.log('success'); 
 
     
 
     }, 
 
\t \t \t error: function (model, response, options) { 
 
\t \t \t \t console.log('error'); 
 
     } 
 
     }); 
 
\t }, 
 
\t cancel: function() { 
 
\t \t $('#addSubscriber').fadeIn(); 
 
\t \t $('#editInner').fadeOut(); 
 
\t }, 
 
\t render: function() { 
 
\t \t var html = this.template(this.model.toJSON()); 
 
\t \t this.$el.html(html); 
 
\t }, \t 
 
});

Wenn jemand dann helfen könnte, das würde sehr geschätzt werden. Cheers

+0

Warum? Options.data = JSON.stringify (attrs); \t options.contentType = "application/json"; '? –

+0

Was ist der Sinn von 'var getSubscriberModel = this.model.set ('id', this.model.attributes.id, {silent: true})'? –

+0

@T J oops ... es gibt keinen Zweck..Ich habe es da durch Zufall –

Antwort

1

Das Problem ist el: '#updateSubscriber',. Alle Ihre View-Instanzen verweisen auf dasselbe Element, an das Ereignisse delegiert wurden. Wenn Sie auf eines der .save-subscriber klicken, wird das Update für alle View-Instanzen ausgelöst. Sie sollten el nicht für eine Ansicht angeben, die mehr als eine Instanz haben wird.

+0

Ok, das scheint ich zu haben dort einen offensichtlichen Fehler gemacht, aber wenn ich kein [el] spezifiziere, wie wird dann meine Ansichtsvorlage innerhalb des DOM gerendert? –

+0

@ James_101 Backbone erstellt ein Element als'El' für jede Instanz, es sei denn, Sie geben 'el' an Sie können die Vorlage an dieses Element anhängen und an DOM anhängen –

+1

@TJ Danke für Ihre Hilfe. –

Verwandte Themen