Firebase child_added прослушиватель событий, возвращающий повторяющиеся данные

Question

Я использую Firebase child_added, чтобы следить за добавлением новых записей в мою базу данных.

Возможно, это сработало некоторое время, но затем я заметил некоторые проблемы при выходе из соединения. Если я оставлю свое приложение открытым в течение длительного периода времени, когда Firebase возвращает дубликаты. Я думаю, что это может быть связано с тем, что соединение было отброшено, а затем установлено.

Вот мой код.

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

Если я правильно понимаю вашу проблему, то это то, с чем я столкнулся несколько раз. Я считаю, что этот трюк составляет .empty() существующих данных с помощью вызова .on.

В качестве примера, на моем сайте у нас есть цели, которые пользователи могут добавить. Когда они добавляют новый Goal, то вызов .on добавляет новый Goal в нижней части их списка.

У меня возникла проблема, при которой удаление Цель затем дублирует данные пользовательского интерфейса.

Для решения проблемы, я переехал $(#goals").empty(); с вызовом .on.

firebase.database().ref('users/' + user).on('value', function(snapshot) { 
    $("#goals").empty(); // This removes all all previously added goals 

    snapshot.forEach(function(data) { 
     var id = data.key; 
     var desc = data.val().desc; 
     var url = data.val().url || "https://unsplash.it/400?image=" + getRandomNumber(); 
     displayGoal(id,desc,url); 
    }); 
// If you need to append anything after all the data has been added you can do it here. e.g. $("#goals").append("</div>"); 
    }); 

Я подозреваю, что это приведет к перезагрузке всех соответствующих элементов пользовательского интерфейса, но они этого не делают. Если я добавлю Goal, он просто появится в нижней части списка, если я удалю Goal пользовательский интерфейс просто удаляет цель без какой-либо перезагрузки или дублирования.

Итак, в вашем случае вы должны добавить $('.collapsible').empty(); после звонка .on и до var voicemail = snapshot.val();.

Примечание: Раньше я звонил бы $("#goals").empty() до звонка .on.