使用JSON获取Backbone.js集合

我正在使用Backbone.js和Phil Sturgeon的CI rest服务器（非常棒的工具，绝对推荐）

这是我的页面：。它是非常基本的，一个模型（事件）、一个集合（事件）和一个视图（事件视图）。 集合位于并返回一个JSON数组，该数组已使用jsonformatter.curiousconcept.com进行验证

代码如下：

$(function(){
    var Event = Backbone.Model.extend();
    var Events = Backbone.Collection.extend({
        model: Event,
        url: 'http://api.interr0bang.net/calendar/events',

    });
    var EventView = Backbone.View.extend({
        initialize: function(){
            _.bindAll(this, "render","count");
            this.collection = new Events();
            this.collection.bind("change",this.count);
            this.collection.fetch();
            this.counter = this.collection.length;
            this.render();
        },
        render: function(){
            this.el.html(this.counter);
        },
        count: function(){
            this.counter = this.collection.length;
        }
    });
    eventView = new EventView({el:$('#collection')});
});

---

视图呈现良好，但始终显示0，Firebug显示GET请求，状态为200OK，但响应正文为空。。。为什么不工作？

您有配置问题。如果查看浏览器，它会报告：

XMLHttpRequest cannot load http://api.interr0bang.net/calendar/events. Origin     
http://interr0bang.net is not allowed by Access-Control-Allow-Origin.

---

我当前从您发布的两个URL中都收到错误

=404
=无法到达

另一方面，我发现最好尽可能地将事物分开（模型不应该知道视图，视图不应该知道模型等等）。因此，我建议您不要在视图中实例化集合

以下是上述代码的重构实现：

$(function(){
  var
    Event = Backbone.Model.extend({})
    ,Events = Backbone.Collection.extend({
      model: Event
      ,url: 'http://api.interr0bang.net/calendar/events'
    })
    ,EventView = Backbone.View.extend({
      initialize: function(){
        _.bindAll(this, 'count');
        this.collection.bind('all', this.count);
      }
      ,count: function() {
        this.el.html(this.counter = this.collection.length);
      }
    })
    ,events = new Events()
    ,eventView = new EventView({
      el: $('#collection')
      ,collection: events
    })
  ;

  events.fetch();
});

---

请注意，我是如何将集合传递给视图的，而不是它自己创建的。还请注意，我删除了render方法，并将其与count相结合。无论何时更改集合（添加、删除、重置），都将调用

count

，并更新视图。

您不能进行跨域Ajax调用，即使在子域之间也是如此。。。因此，基本上，域

interr0bang.net

上的浏览器会阻止对域

API.interr0bang.net

上的API的Ajax调用。。。这就是JavaScript警告的含义：

Origin http://interr0bang.net is not allowed by Access-Control-Allow-Origin.

您可以通过将API移动到同一个域来解决此问题，例如：

http://interr0bang.net/api/calendar/events

如果可以的话

如果不能这样做，可以通过在API方法的响应中包含一些头来授权Ajax跨域调用。这就是协议，它适用于大多数现代浏览器

---

下面是关于CORS的另一个StackOverflow答案，解释了它的工作原理：

您应该使用JSONP hack通过跨域获取JSON数据

---

您可以覆盖Backbone.js sync进行工作：

非常感谢您的输入，事实上我能够将api移动到同一个域。如果您不在任何地方使用逗号，示例对初学者来说会更好。我以通常编写代码的方式编写代码。我不尝试为最小公分母编码。如果有什么让您感到困惑，请随时要求澄清。这个怎么样？我在我的项目中遇到了同样的问题。您能告诉我您是如何解决此问题的吗？在本例中，尝试绑定到“更改”以更新项目的“计数”是毫无意义的。也许这在9月11日是有效的，但今天您必须绑定到“添加”或“删除”