Backbone collection trigger twice when going back

Question

I have a weard issue with a collection, when I first load my compositeView everything is working great but then when I start navigate in my app and then comeback to my compositeView(Backbone.history.navigate) it looks like my collection is called twice (my itemviews are fired twice).

I have try to debug, but I fetch my collection only once, the is only one init, the router seems to be ok too.

Here is my compositeView:

'use strict';
define(["jquery", "backbone", "marionette", "text!templates/portraits/portrait.html", "view/portraits/portraitItemView", "collection/portraitCollection", "application", "JSMovieclip"], function($, Backbone, Marionette, template, PortraitItemView, portraitCollection, App) {
var PortraitsCompositeView = Marionette.CompositeView.extend({
    template : _.template(template),
    collection : portraitCollection,
    tagName: "div",
    id : "articles",
    itemView : PortraitItemView,
    itemViewContainer : '#list-articles',
    itemViewOptions: {
      collection: portraitCollection
    },
    initialize : function (options) {

        _.bindAll(this);
        this.options = options || {};
        this.collection.fetch({
          type: 'POST',
          success : function(data, raw) {
            App.execute('loader', false);
          }
        });
    },

And here is my collection :

'use strict';
define(["jquery", "underscore", "backbone", "marionette", "model/portraitsModel"], function($, _, Backbone, Marionette, PortraitModel) {
    var PortraitCollection = Backbone.Collection.extend({
        model : PortraitModel,
        sync: function(method, model, options) {

          var params = _.extend({
              type: 'GET',
              dataType: 'jsonp',
              url: 'http://backend.url.fr/api/portraits/get_list/',
              processData: false
          }, options);

          return $.ajax(params);
        },
        parse : function(response) {
            this.totalLength = response.count;
            return response.portraits;
        }
    });
    return new PortraitCollection;
});

Answer 1

I finally found my error, my json was returning an empty "id" field, after fixing it, everything works great.

Answer 2

Your collection fetch is appending the items to itself.

You can add reset:true to your Collection.fetch properties

initialize : function (options) {

    _.bindAll(this);
    this.options = options || {};
    this.collection.fetch({
      reset: true,
      type: 'POST',
      success : function(data, raw) {
        App.execute('loader', false);
      }
    });
},