title: How to show data in list using twitter bootstrap.js & data from collection of model in backbone.js?
body: <p>I am trying to create a simple page using backbone.js and bootstrap.js. I am unable to understand how to play with view of backbone.js so that I have my entire collections of model to represent as a list in bootstrap. I tried searching lot of articles on net but couldn't find something easy that I can understand. Can you please suggest some blog or article on how to do following:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;script&gt;
          Boys = Backbone.Model.extend({
              defaults : {
              Name : '',
              Age : ''
              }
          });
  
          GardeA = Backbone.Collection.extend({
              model : Boys,
              url : http://localhost:8080/getGradeAData,
          });
  
          GradeAView = Backbone.View.extend({
              el: '.container .span12',
              initialize: function(){
                  gradeA = new GardeA();
                  gradeA.fetch();
                  this.render();
              },
              render: function(){ 
                  //How can I assign the model collection here
                  //directly to render in the below bootstrap html page can you please help
                  this.$el.html('List of students');
              }
          });
          gradeAView = new GradeAView();
  &lt;/script&gt;
  
  &lt;div class="container"&gt; 
      &lt;div class="hero-unit"&gt;Loading&lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="span12"&gt;
                  &lt;h3&gt;Projects: &lt;/h3&gt;
                  &lt;ul class="nav nav-tabs nav-stacked"&gt;
                      &lt;!-- need to show list of students here--&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>