title: View is not getting rendered backbonejs
body: <p>I have the following backbonejs code which fetches data in collection from my API.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = app || {};
  
  app.Book = Backbone.Model.extend({
      defaults: {
      photo: 'https://tpc.googlesyndication.com/simgad/10102369525962162085'
    }
  
  });
  
  app.Library = Backbone.Collection.extend({
      model: app.Book,
      url: 'http://localhost:8000/api/v1/products_user',
      parse: function (response) {
         return response.data;
      }
  });
  
  app.BookView = Backbone.View.extend({
      tagName: 'article',
      className: 'white-panel',
      template: _.template( $( '#product_grid_template' ).html() ),
  
      render: function() {
          //this.el is what we defined in tagName. use $el to get access to jQuery html() function
          this.$el.html( this.template( this.model.attributes ) );
  
          return this;
      }
  });
  
  
  app.LibraryView = Backbone.View.extend({
      el: '#pinBoot',
  
      initialize: function() {                    // UPDATED
          this.collection = new app.Library();    // UPDATED
          this.collection.fetch({
              reset:true});
  
          this.listenTo( this.collection, 'add', this.renderBook );
          this.listenTo( this.collection, 'reset', this.render ); // NEW
  
      },
  
      // render library by rendering each book in its collection
      render: function() {
          console.log('render');
          this.collection.each(function( item ) {
              this.renderBook( item );
          }, this );
      },
  
      // render a book by creating a BookView and appending the
      // element it renders to the library's element
      renderBook: function( item ) {
          var bookView = new app.BookView({
              model: item
          });
          this.$el.append( bookView.render().el );
      }
  });
  
  new app.LibraryView();
  </code></pre>
  
  <p>The above code renders the following HTML</p>
  
  <pre><code>&lt;article class="white-panel r1 c0" style=
  "width: 316.667px; left: 0px; top: 0px;"&gt;
      &lt;div class="widget portfolio graphics homepage"&gt;
          &lt;div class="entry-container span4"&gt;
              &lt;!-- Portfolio Image --&gt;
              &lt;div class="entry-image"&gt;
                  &lt;a href="product.html"&gt;&lt;img alt="" src=
                  "https://tpc.googlesyndication.com/simgad/10102369525962162085"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="entry drop-shadow curved"&gt;
                  &lt;!-- Portfolio Heading --&gt;
                  &lt;div class="heading"&gt;
                      &lt;a href="#"&gt;My product&lt;/a&gt; HII
                  &lt;/div&gt;
                  &lt;div class="camera" data-target="#prod0-modal" data-toggle=
                  "modal"&gt;
                      3
                  &lt;/div&gt;
                  &lt;div class="price"&gt;
                      ₹ 10 &lt;span&gt;+ Delivery Charges ₹ 11&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>The whole HTML and data was getting rendered to the HTML and I found the why the was not visible was because, a style parameter 'style="opacity: 1;"' is not getting added to the <code>&lt;div class="entry-container span4"&gt;</code></p>
  
  <p>The above app.js , I have modified to work, without an API as follows</p>
  
  <pre><code>app.LibraryView = Backbone.View.extend({
      el: '#pinBoot',
  
      initialize: function(initialBooks) {                    
          // this.collection = new app.Library();   
          // this.collection.fetch({
          //     reset:true});
  
          // this.listenTo( this.collection, 'add', this.renderBook );
          // this.listenTo( this.collection, 'reset', this.render ); // NEW
          this.collection = new app.Library( initialBooks );
          this.render();
  
      },
  
      // render library by rendering each book in its collection
      render: function() {
          console.log('render');
          this.collection.each(function( item ) {
              this.renderBook( item );
          }, this );
      },
  
      // render a book by creating a BookView and appending the
      // element it renders to the library's element
      renderBook: function( item ) {
          var bookView = new app.BookView({
              model: item
          });
          this.$el.append( bookView.render().el );
      }
  });
  
  var books = [
          { product_name: 'My product',delivery_charge: '10.00',amount:'10.22' },
             ];
  new app.LibraryView(books);
  </code></pre>
  
  <p>Now everything works perfectly, the style gets added to the div without any problems. The style is getting added using a fade effect javascript which is suppose to give a fadein effect to the grids, but when I fetch data and renders using the API , the div doesn't get added by the style element.</p>
  
  <p>Why is this happening? Is it something to do with the pageload rendering or asynchronous data loading? </p>
  
  <p>I am new to backbonejs, can someone helps me whats going wrong here when I call the API?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have this script which is adding the opacity element to the div for visiblity</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
           //&lt;![CDATA[
              $(window).load(function() { // makes sure the whole site is loaded
                   $("#status").fadeOut(); // will first fade out the loading animation
                   $("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
                   $("#preloader-container").css("position","static");
                   $(".widget .entry-container").each(function(index) {
                       $(this).delay(400*index).animate({'opacity': 1},300);
  
                   });  
               });
           //]]&gt;
        &lt;/script&gt;
  </code></pre>
  
  <p>Is this script conflicting with my backbone data rendering?</p>