title: Marionette CompositeView called on every element add from collection, which belongs to the CompositeView... Why?
body: <p>The problem is that every single time I add a new object through the fetch function of a collection (<strong>MovieCollection</strong>) on each element add some sort of event triggers and it initialises a new <strong>MovieList</strong> object to which the collection was passed after it has fetched all the items.</p>
  
  <p>Here is my app.js:</p>
  
  <pre><code>// Global App skeleton for backbone
  var App = new Backbone.Marionette.Application();
  _.extend(App, {
      Controller: {},
      View: {},
      Model: {},
      Page: {},
      Scrapers: {},
      Providers: {},
      Localization: {}
  });
  
  // set database
  App.addRegions({ Window: ".main-window-region" });
  
  App.addInitializer(function(options){
      var mainWindow = new App.View.MainWindow();
      try{
          App.Window.show(mainWindow);
      } catch(e) {
          console.error("Couldn't start app: ", e, e.stack);
      }
  });
  </code></pre>
  
  <p>So basically I create the MainWindow View which looks like:</p>
  
  <pre><code>(function(App) {
      "use strict";
  
      var MainWindow = Backbone.Marionette.LayoutView.extend({
          template: "#main-window-tpl",
  
          id: 'main-window',
  
          regions: {
              Content: '#content',
          },
  
          initialize: function() {
              //Application events
              //App.vent.on('movies:list', _.bind(this.showMovies, this));
          },
  
          onShow: function() {
              this.showMovies();
              //App.vent.trigger('main:ready');
          },
  
          showMovies: function(e) {
              var browser = new App.View.MovieBrowser();
              this.Content.show(browser);
          }
      });
  
      App.View.MainWindow = MainWindow;
  })(window.App);
  </code></pre>
  
  <p>Here is the <strong>MovieBrowser</strong> which should make the collection, fetch it and then on the show would pass it to the <strong>MovieList</strong>.</p>
  
  <pre><code>(function(App) {
      'use strict';
  
      var MovieBrowser = Backbone.Marionette.LayoutView.extend({
          template: '#movie-browser-tpl',
          className: 'movie-browser',
          regions: {
              MovieList: '.movie-list-region'
          },
  
          initialize: function() {
              console.log('Init MovieBrowser');
              this.movieCollection = new App.Model.MovieCollection([], {});
              this.movieCollection.fetch();
          },
  
          onShow: function() {
              var ml = new App.View.MovieList({
                  collection: this.movieCollection
              });
              this.MovieList.show(ml);
          }
      });
  
      App.View.MovieBrowser = MovieBrowser;
  })(window.App);
  </code></pre>
  
  <p>So in turns the <strong>MovieCollection</strong> is (with I guess a major problem being something with it): </p>
  
  <pre><code>(function(App) {
      "use strict";
  
      var MovieCollection = Backbone.Collection.extend({
          model: App.Model.Movie,
  
          initialize: function(models, options) {
              console.log('Init MovieCollection');
          },
  
          fetch: function() {
              this.add([{"imdb":"1598172","title":"Once Upon a Time in Brooklyn","year":2013,"MovieRating":"4.1","image":"http://zapp.trakt.us/images/posters_movies/217035-300.jpg","bigImage":"http://zapp.trakt.us/images/posters_movies/217035-300.jpg","torrents":{"1080p":{"url":"https://yts.re/download/start/739F9B2F114DB4B48D34DEE2787725FF0747F6F3.torrent","size":"1768399511","seed":"2712","peer":"1709"},"720p":{"url":"https://yts.re/download/start/E482DC66BA1117F3706FACD0292BD32F1CDFE5F5.torrent","size":"854590014","seed":"1553","peer":"828"}},"backdrop":"http://zapp.trakt.us/images/fanart_movies/217035-940.jpg","synopsis":"After being released from prison, Bobby goes back to the mob connected streets. When forced to make a life altering decision the truth is revealed that he was too blind to see.","genres":[],"certification":"R","runtime":116,"tagline":"","trailer":""}]);
          },
      });
  
      App.Model.MovieCollection = MovieCollection;
  })(window.App);
  </code></pre>
  
  <p>And <strong>MovieList</strong> is:</p>
  
  <pre><code>(function(App) {
      "use strict";
  
      var SCROLL_MORE = 200;
  
      var ErrorView = Backbone.Marionette.ItemView.extend({
          template: '#movie-error-tpl',
          onBeforeRender: function() {
              this.model.set('error', this.error);
          }
      });
  
      var MovieList = Backbone.Marionette.CompositeView.extend({
          template: '#movie-list-tpl',
          tagName: 'ul',
          className: 'movie-list',
          itemView: App.View.MovieItem,
          itemViewContainer: '.movies',
          initialize: function() {
              console.log('Init MovieList')
              if (typeof this.collection !== 'undefined') {
                  //this.listenTo(this.collection, 'loading', this.onLoading);
                  //this.listenTo(this.collection, 'loaded', this.onLoaded);
                  //this.collection.fetch();
              } else {
                  console.trace()
              }
          },
      });
  
      App.View.MovieList = MovieList;
  })(window.App);
  </code></pre>
  
  <p>This is the <strong>MovieItem</strong>:</p>
  
  <pre><code>(function(App) {
      "use strict";
  
      var MovieItem = Backbone.Marionette.ItemView.extend({
          template: '#movie-item-tpl',
          tagName: 'li',
          className: 'movie-item',
          ui: {
              coverImage: '.cover-image',
              cover: '.cover'
          }
      });
  
      App.View.MovieItem = MovieItem;
  })(window.App);
  </code></pre>
  
  <p>With finally the Movie model being:</p>
  
  <pre><code>(function(App) {
      "use strict";
  
      var Movie = Backbone.Model.extend({
          idAttribute: 'imdb',
          initialize: function() {
          },
      });
  
      App.Model.Movie = Movie;
  })(window.App);
  </code></pre>
  
  <p>So in order to run it I basically have to check if collection is undefined. To see if it would continue and it does but the application itself is not working properly as it creates several MovieList items adding several ul elements with the same id.</p>
  
  <p>here is the html templates:</p>
  
  <p><a href="http://jsfiddle.net/tarazo8e/" rel="nofollow">http://jsfiddle.net/tarazo8e/</a></p>
  
  <p>and this is the order of inclusion of the JS files:</p>
  
  <pre><code>&lt;!-- App Initialization --&gt;
  {{ HTML::script('js/App/app.js') }}
  
  &lt;!-- Backbone Views and Controllers --&gt;
  {{ HTML::script('js/App/views/main_window.js') }}
  
  {{ HTML::script('js/App/views/movie_browser/movie_browser.js') }}
  {{ HTML::script('js/App/views/movie_browser/movie_item.js') }}
  
  &lt;!-- Backbone Models --&gt;
  {{ HTML::script('js/App/models/movie.js') }}
  {{ HTML::script('js/App/models/movie_collection.js') }}
  
  
  {{ HTML::script('js/App/views/movie_browser/movie_list.js') }}
  </code></pre>
  
  <p>I tried moving movie_list.js at almost any position with no luck.</p>
  
  <p>Any help would be so so so much appreciated as this is driving me crazy for the past 5 days.</p>
  
  <p>Credits: The code has been taken from an old version of Popcorn-Time for only learning purposes. </p>
  
  <p>Edit:</p>
  
  <p><strong>Live versions that shows the exact error:</strong></p>
  
  <p><a href="http://googledrive.com/host/0Bxf4SpRPErmGQmdKNmoyaEVSbmc" rel="nofollow">http://googledrive.com/host/0Bxf4SpRPErmGQmdKNmoyaEVSbmc</a></p>