主干：即使已获取集合，也不会在视图中呈现集合

Question

我知道对此有一些问题，但答案对我来说不是很清楚。这就是为什么我再次问这个问题，以便我可以得到一个清晰而简单的答案。

我一直在 Backbone 中使用 Collection 时遇到问题，尤其是使用 JSON 数据填充它。

我似乎无法让集合在视图中呈现，即使在 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的链接

补充几点

一般来说，您希望尽可能地解耦您的代码。为此，最好在视图之外声明和初始化您的集合，然后将其传入。这还具有使您的代码更可重用的优点，例如，假设您想呈现第二个调用列表（假设最近的调用），您现在可以创建第二个视图实例，传入集合和元素。

例如

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

请注意，不应使用 fetch 来填充页面上的集合 load - 加载时需要的所有模型都应该已经被引导 到位。 fetch 用于延迟加载模型 不需要立即使用的接口：例如，文档 带有可以打开和关闭的笔记集合。