Javascript 主干：即使是'；它被吸引了

我知道有一些关于这方面的问题，但答案对我来说不是很清楚。这就是为什么我再次问这个问题，这样我就可以有一个清晰简单的答案

我在主干网中的

Collection

方面总是遇到麻烦，尤其是用JSON数据填充主干网

我似乎无法在视图中呈现集合，即使在firebug中我可以看到，它正在从服务器获取，但屏幕仍然是空的。 另外，当我执行

console.log（'callers:'，this.callerList）

时，它返回一个带有

models=[0]

的对象。但是当我展开对象时，

模型

中充满了来自JSON文件的数据。主干网发生了什么，结果令人困惑

有人能给我解释一下怎么做吗？我已经和这件事斗争了很长时间了，但我无法控制它

非常感谢

JS:

HTML:

---

实际上，您尚未将集合分配给调用者视图，此外，在迭代集合时，您应该使用

this.collection.models

而不是

this.model.models

例如，在初始化呼叫者列表时 初始化：函数（）{

渲染时

render: function(e) {

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

          }, this);

          return this;
      }

这里有一个链接到

一些附加点

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

比如说

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

并不是真正用来从

请注意，不应使用fetch填充页面上的集合 加载-加载时需要的所有模型都应该已经引导 fetch用于延迟加载的模型 不立即需要的接口：例如，文档 具有可切换打开和关闭的注释集合

---

我没有看到任何明显的问题。我建议您在点

this.$el.append（this.template（caller.toJSON（））；

处设置断点。检查调用者是否正确，以及调用者是否为.toJSON（）返回您认为应该返回的内容。验证this.template是否正确，$el是否正确，等等。感谢@Neil的响应。我刚刚在render函数中添加了一些

控制台.log

，以查看调用方

中的内容，但似乎
render
甚至没有被应用。您试图在集合中进行迭代，但失败了你实际上还没有分配它，另外你使用的是this.model而不是this.collection.Thank@Jack。我刚刚用你的建议更新了我的答案。但是它仍然没有渲染任何东西，渲染函数正在被调用。我认为问题比这更严重，我不知道它是什么。你说的collecti是什么意思on未分配？我发布了一个带有jsbin链接的答案，请注意，我正在手动添加数据并调用呈现函数，而不是获取数据，但它的工作原理应该是一样的。谢谢@Jack。但我仍然感到困惑。将集合分配给
视图是什么意思？这也不能解释为什么JSON数据没有显示在屏幕上是。我知道如何手动插入数据，但这次，我希望显示来自服务器的数据，因为这是在现实世界中使用的。现在，我在
initilize
中添加了
this.render（）
，其中包含来自JSON的数据，但它仍在工作…：（我手动分配数据的原因只是因为它更容易在jsbin中设置，在获取数据时也应该如此。至于将集合分配给视图，主干有一个model属性和一个collection属性（两者都不是必需的，但是如果您对模型使用视图，那么您将使用
model
属性，对集合使用
collection
属性。好的，我已经尝试了您的jsbin示例，它可以工作，即手动数据，分配给视图，如下所示：
var callerView=new callerView（{collection:new CallersList}）；
。但一旦我将手动数据更改为服务器数据，就不会再显示任何内容。因此，我认为我的代码在处理来自JSON的数据时没有做正确的事情？？？在应用来自JSON的数据之前，我必须做些事情，无论是服务器还是浏览器配置，主干中缺少一段代码，等等。这就是我所做的想知道，如何正确操作。显然，较新版本的backbone.js在您进行提取时不再重置集合，除非您将
reset:true
传递给您的应用程序。这取决于您的特定应用程序，但一般来说，您可能希望在视图之外声明并传递它。我已编辑了我的答案，以包含更多信息关于这件事。
[
  {
      "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"
  }
]

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

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