Search code examples
javascriptbackbone.jsbackbone-views

Rendering a table with Backbone

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)

Here is the HTML code for the table:

<div class="container-fluid">
<table id= "teachers">
<thead>
<tr>
  <th>Name</th>
  <th>Last Name</th>
  <th>Code</th>
  <th>Last time online</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>

<script type="text/template" id="teacher-template">
<td><%= name %></td>
<td><%= lastname %></td>
<td><%= code %></td>
<td><%= lastactivity %></td>
</script>

Here is the JS 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;

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:

enter image description here

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.

(The parameters of the model in the image, differ from the code. I'd translate to make it more easy to understand.)

Solution

  • how I can pass a collection to a view, or a model of the collection to a view?

    You are already doing that in your code:

    var teacher = new TeacherView({
  model: model
});

    Here you're passing a model to view's constructor using model option.

    You can pass a collection to view via it's constructor like:

    var app = new TeachersView({
  collection:teachercollection
});

    Which you can access inside the view via this.collection and this.model respectively.

    var TeachersView = Backbone.View.extend({
  el: '#table-body',
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html('');
    this.collection.each(function(model) {
      this.$el.append(new TeacherView({
        model: model
      }).el);
    },this);
    return this;
  }
});

    Note that fetch() is asynchronous, so you'll need to wait till it succeeds before rendering the view.

    See the suggestions in this answer regarding the changes I made to your render method.

    this answer might help understanding a thing or two.