使用 Backbone 渲染 table

Question

我的代码需要帮助，我正在努力学习 Backbone 我的社会项目。我正在尝试从 API (deployd API)

获得的集合中渲染视图

这是 table 的 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;

所以我的问题是，如何将集合传递给视图，或将集合的模型传递给视图？我想呈现 table 中每一行的数据。浏览器获取集合，你可以在这里看到：

我已经尝试了好几天了，我就是无法理解其中的逻辑，我已经阅读了文档和 Addy Osmani 的一些书，但就是无法理解，有人可以吗给我解释？一直在这个网站上寻找答案，但其中一些包含一些 "add models" 东西，这让我更加困惑。

（图中模型的参数，与代码有出入，我翻译一下，方便理解。）

Answer 1

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

您已经在代码中这样做了：

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可能有助于理解一两件事。

使用 Backbone 渲染 table

Rendering a table with Backbone

javascript

backbone.js

backbone-views