用Backbone渲染表

Question

我需要帮助我的代码，我正在尝试为我的社交项目学习Backbone。我正在尝试从API（deployd API）

中获取的集合中呈现视图

以下是该表的HTML代码：

<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>   

这是JS代码：

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;

所以我的问题是，我如何将集合传递给视图，或者将集合的模型传递给视图？我想渲染表中每行的数据。浏览器获取集合，如您所见：

我已经尝试了几天，我只是无法理解逻辑，我已经阅读了文档，还有一些Addy Osmani的书，但是我无法理解它，有人可以解释它对我来说？一直在寻找这个网站的答案，但其中一些包括一些“添加模型”的东西，这让我更加困惑。

（图像中模型的参数与代码不同。我会翻译以使其更容易理解。）

Answer 1

  

如何将集合传递给视图，或将集合的模型传递给视图？

您已经在代码中执行此操作：

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

在这里，您使用模型选项传递模型以查看构造函数。

你可以通过它的构造函数传递一个集合来查看：

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

您可以分别通过this.collection和this.model在视图中访问。

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;
  }
});

请注意fetch() is asynchronous，因此在渲染视图之前，您需要等到成功。

请参阅此answer中有关我对渲染方法所做更改的建议。

这answer可能有助于理解一两件事。