javascript - Backbone : Collection not rendered in View even though it's fetched

Question

我知道关于这个有几个问题，但答案不是很清楚，我无法实现。这就是我再次问这个问题的原因，这样我就可以得到一个简单明了的答案。

我一直在使用 Backbone 中的 Collection 遇到麻烦，尤其是用 JSON 数据填充它。

我似乎无法让集合在 View 中呈现，即使在 Firebug 中我可以看到它是从服务器获取的，但屏幕仍然是空的。此外，当我执行 console.log('callers: ', this.callerList) 时，它会返回一个包含 models=[0] 的对象。但是当我展开对象时，models 充满了来自 JSON 文件的数据。 Backbone 发生了什么，结果令人困惑？

有人可以向我解释一下该怎么做吗？我已经与这个问题斗争了很长时间，但我无法理解它。

非常感谢

JS:

(function($, window) {

  // model
  var CallerModel = Backbone.Model.extend({});

  // collection
  var CallersList = Backbone.Collection.extend({
      model: CallerModel,
      url: 'js/json/callers.json'
  });

  // view
  var CallerView = Backbone.View.extend({
      el: '.caller-app',

      template: _.template($('#callers-template').html()),

      initialize: function() {
          this.callerList = new CallersList();
          this.callerList.fetch();
          this.callerList.bind('reset', this.render);

          console.log('caller: ', this.callerList);
      },

      render: function(e) {

                  console.log('RENDER');

          _.each(this.collection.models, function(caller) {
              this.$el.append(this.template(caller.toJSON()));
                          console.log('callerList: ', caller);
          }, this);

          return this;
      }
  });

  // start
  var callerView = new CallerView();

}(jQuery, window));

HTML:

<!-- wrapper -->
<div class="wrapper">
    <h1>Missed Calls App</h1>

    <div class="caller-app"></div>

</div>
<!-- wrapper -->


<!-- templates -->
<script type="text/template" id="callers-template">
    <div class="caller">
        <h2><%= title %> <%= name %> called</h2>
        <h3>From <%= agency %></h3>
        <p>When: <%= when %></p>
        <p>Contact: <%= tel %></p>
        <p>Says:"<%= message %>"</p>
    </div>
</script>
<!-- templates -->

JSON:

[
  {
      "id": 1,
      "title": "Mrs",
      "name": "Mui",
      "agency": "Ryuzanpaku Dojo",
      "when": "evening",
      "tel": "0207 123 45 67",
      "message": "Check your availability"
  },
  {
      "id": 2,
      "title": "Mrs",
      "name": "Shigure",
      "agency": "Ryuzanpaku Dojo",
      "when": "evening",
      "tel": "0207 123 45 67",
      "message": "Check your availability"
  }
]

Answer 1

您还没有实际为您的 CallerView 分配一个集合，此外，当您遍历该集合时，您应该使用 this.collection.models 而不是 this.model.models

例如在初始化你的来电列表时 初始化:函数(){

    initialize: function() {
    this.collection = new CallersList();
    this.collection.fetch();
    this.collection.bind('reset', this.render);
   }

渲染时

render: function(e) {

          _.each(this.collection.models, function(caller) {
              this.$el.append(this.template(caller.toJSON()));

          }, this);

          return this;
      }

这是一个指向 jsbin 的链接

一些额外的要点

通常，您希望尽可能多地解耦代码。为此，最好在 View 之外声明和初始化您的集合，然后将其传入。这也具有使您的代码更具可重用性的优点，例如假设您想要呈现第二个调用列表(假设最近的电话)，您现在可以创建 View 的第二个实例，传入一个集合和元素。

例如

var missedCalls = new CallersList();
var callerView = new CallerView({collection : missedCalls, el: '#missedCalls' });
missedCalls.fetch();


var recentCalls = new CallerList(); //you probably want to use a different url
var recentCallersView = new CallerView({collection : recentCalls, el:'#recentCalls'}); 
recentCalls.fetch();

还有一点值得一提，目前您正在为每次提取渲染集合中的所有项目，包括任何已经渲染的项目。您可能希望在呈现之前清空 el 或监听 add 事件并在添加每个项目时单独呈现它。此外，值得指出的是，fetch 并不是真正用于在页面加载时从 documentation 加载数据。

Note that fetch should not be used to populate collections on page load — all models needed at load time should already be bootstrapped in to place. fetch is intended for lazily-loading models for interfaces that are not needed immediately: for example, documents with collections of notes that may be toggled open and closed.