title: backbone.js collection render html fullscreen api slide show
body: <p>I am having trouble approaching this correctly. </p>
  
  <p>I have a collection of slides that I want to click on to play them as a fullscreen slideshow.</p>
  
  <p>I have a model:</p>
  
  <pre><code>var Slide = Backbone.Model.extend({
      defaults: {
      title: "",
      header: "Slide Header",
      content: "Paragraph"
  },
  ...
  });
  </code></pre>
  
  <p>a collection:</p>
  
  <pre><code>var SlidesCollection = Backbone.Collection.extend({});
  </code></pre>
  
  <p>and a view: </p>
  
  <pre><code>var SlideshowView = Backbone.View.extend({});
  </code></pre>
  
  <p>I add the slides to the collection and render them through an underscore template elsewhere.</p>
  
  <pre><code>var slides = [{title  :"this is the first slide", 
                 header :"this is the first header", 
                 content:"this is finally the content"
                },
                {title  :"this is the second slide", 
                 header :"this is the second header", 
                 content:"this is second the content"
               }];
  
  var sc = new SlidesCollection();
  sc.add(slides);
  </code></pre>
  
  <p>I am not sure how to leverage the html fullscreen api to make a slideshow. Any suggestions. </p>