Firebase child_added Ereignis-Listener, der doppelte Daten zurückgibt

Question

Ich verwende Firebase child_added, um nach neuen Einträgen zu suchen, die meiner Datenbank hinzugefügt werden.

Es schien für eine Weile zu funktionieren, aber dann bemerkte ich einige Probleme beim Verlassen der Verbindung im Leerlauf. Wenn ich meine App für einen längeren Zeitraum offen lasse, wenn Firebase Duplikate zurückgibt. Ich denke es liegt vielleicht daran, dass die Verbindung fallengelassen und dann eingerichtet wird.

Hier ist mein Code.

getVoicemailList: function() { 
    var self = this; 
    var userId = firebase.auth().currentUser.uid;  
    firebase.database().ref('voicemails/' + userId).on('child_added', function(snapshot) { 
     var voicemail = snapshot.val(); 
     self.addToCollection(voicemail.callerID, voicemail.timeReceived, voicemail.transcription, voicemail.audioURL); 
    }); 
}, 

addToCollection: function(callerID, timeReceived, transcription, audioURL) { 
    console.log(callerID) 
    var collectionList = $('.collapsible').length; 

    if(!collectionList) { 
     $('#main-content').append('<ul class="collapsible" data-collapsible="accordion"></ul>') 
    } 

     var output = '<li>'; 
     output += '<div class="collapsible-header"><i class="material-icons">filter_drama</i>'+callerID+'</div>';  
     output += '<div class="collapsible-body">'; 
     output += '<p><audio id="source" controls>';    
     output += '<source src="'+audioURL+'" type="audio/mpeg">'; 
     output += '</audio></p>'; 
     output += '<p>'+timeReceived+'</p>'; 
     output += '<p>'+transcription+'</p>'; 
     output += '</div>';  
     output += '</li>'; 
     $('.collapsible').append(output); 
     $('.collapsible').collapsible(); 
}, 

Answer 1

Wenn ich Ihr Problem richtig verstehe, dann ist es etwas, das ich ein paar Mal begegnet bin. Ich glaube, der Trick ist .empty() die vorhandenen Daten aus dem .on Aufruf.

Als Beispiel auf meiner Website haben wir Ziele, die Benutzer hinzufügen können. Wenn sie einen neuen Goal hinzufügen, fügt der .on Anruf eine neue Goal an den unteren Rand ihrer Liste.

Ich hatte ein Problem, bei dem ein Löschen Ziel dann die UI-Daten duplizieren würde.

Um das Problem zu beheben, habe ich $(#goals").empty(); innerhalb der .on Anruf verschoben.

Ich vermutete, dass dies würde alle relevanten UI-Elemente zum Neuladen zwingen, aber sie nicht tun. Wenn ich ein Ziel hinzufügen es erscheint nur auf der Unterseite der Liste, wenn ich ein Goal entfernen, entfernt die Benutzeroberfläche nur das Ziel ohne Neuladen oder Duplizieren.

Also in Ihrem Fall würden Sie $('.collapsible').empty(); nach dem .on Anruf und vor var voicemail = snapshot.val(); hinzufügen.

Hinweis: Früher würde ich $("#goals").empty() vor dem .on Anruf anrufen.