stopListening() race condition?

Question

var PlaylistView = Backbone.View.extend({
  el: '#expanded-container',

  initialize: function() {
    var playlistModel = this.model;
    this.stopListening(playlistModel.get('songs'), 'add');
    var form = this.$('input');
    $(form).keypress(function (e) {
      if (e.charCode == 13) {
        console.log("hey")
        var query = form.val();
        playlistModel.lookUpAndAddSingleSong(query);
      }
    });

    this.listenTo(playlistModel.get('songs'), 'add', function (song) {
      var songView = new SongView({ model: song });
      this.$('.playlist-songs').prepend(songView.render().el);
    });

This is a snippet of my Backbone view and I cant figure out why sometimes the same songView is rendered twice. In other view, I call PlaylistView.initialize() manually without recreating the view. Because of that, I deregister all the events in the beginning of initialize to prevent it from listening to the same event multiple times. It does its job but only once in a while, the same songView is rendered twice. I suspect this might be some kind of a race condition but I haven't been able to figure out the reason. Does anyone have an idea?

Answer 1

That may happen if playlistModel.get('songs') are not returning the same objects, try to remove only the event whatever the objects are, like this:

this.stopListening(null, 'add');