javascript - 使用 Backbone 渲染表格

Question

我的代码需要帮助，我正在尝试为我的社交项目学习 Backbone。我正在尝试从我从 API (deployd API) 获得的集合中呈现 View

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

所以我的问题是，如何将集合传递给 View ，或将集合的模型传递给 View ？我想呈现表中每一行的数据。浏览器获取集合，如您在此处所见:

我已经尝试了好几天了，但我就是无法理解其中的逻辑，我已经阅读了文档和 Addy Osmani 的一些书，但就是无法理解，有人可以解释一下吗大部头书？一直在这个网站上寻找答案，但其中一些包含一些“添加模型”的内容，这让我更加困惑。

(图中模型的参数，与代码有所不同，我翻译一下，方便理解。)

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

在这里，您使用模型选项将模型传递给 View 的构造函数。

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

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

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

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 ，因此您需要等到它成功后再渲染 View 。

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

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