title: Rendering a table with Backbone
body: <p>I need help with my code, I'm trying to learn Backbone for my Social Project. I'm trying to render a view from a collection that I got from an API (deployd API)</p>
  
  <p>Here is the HTML code for the table:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;table id= "teachers"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
    &lt;th&gt;Name&lt;/th&gt;
    &lt;th&gt;Last Name&lt;/th&gt;
    &lt;th&gt;Code&lt;/th&gt;
    &lt;th&gt;Last time online&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody id="table-body"&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script type="text/template" id="teacher-template"&gt;
  &lt;td&gt;&lt;%= name %&gt;&lt;/td&gt;
  &lt;td&gt;&lt;%= lastname %&gt;&lt;/td&gt;
  &lt;td&gt;&lt;%= code %&gt;&lt;/td&gt;
  &lt;td&gt;&lt;%= lastactivity %&gt;&lt;/td&gt;
  &lt;/script&gt;   
  </code></pre>
  
  <p>Here is the JS code:</p>
  
  <pre><code>var TeacherModel = Backbone.Model.extend({
  defaults: {
      id:'',
      name: '',
      lastname: '',
      code: '',
      lastactivity: ''
  }
  });
  var TeacherCollection = Backbone.Collection.extend({
      url: "/teachers",
      model: TeacherModel
  });
  var teachercollection = new TeacherCollection();
  teachercollection.url = '/teachers';
  teachercollection.fetch({
    success: function(collection, response) {
      console.log("Done!!");
    }, error: function(collection, response) {
      alert(response);
    }
  });
  var TeachersView = Backbone.View.extend({
    el: '#table-body',
    initialize: function() {
    this.render();
    },
    render: function() {
      this.$el.html('');
      teachercollection.each(function(model) {
      var teacher = new TeacherView({
      model: model
    });
    this.$el.append(teacher.render().el);
  }.bind(this));
  return this;
    }
  });
  var TeacherView = Backbone.View.extend({
    tagName: 'tr',
    template: _.template($('#teacher-template').html()),
    render: function() {
      this.$el.html(this.template(this.model.attributes));
      return this;
    }
  });
  // Launch app
  var app = new TeachersView;
  </code></pre>
  
  <p>So my question is, how I can pass a collection to a view, or a model of the collection to a view? I want to render the data in each row from the table. The browser gets the collection, as you can see here:</p>
  
  <p><a href="https://i.stack.imgur.com/1aVk8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1aVk8.png" alt="enter image description here"></a></p>
  
  <p>I've been trying for days, and I just can't understand the logic, I have read the documentation, and a little of the Addy Osmani's book but just can't get my head on it, can someone explain it to me? Been looking for answers in this site but some on them include some "add models" stuff, which confuse me more.</p>
  
  <p>(The parameters of the model in the image, differ from the code. I'd translate to make it more easy to understand.)</p>