Question

我正在使用Backbone.js和Phil Sturgeon的CI休息服务器（绝对推荐令人惊讶的工具）。

这是我的页面：http://interr0bang.net/7357/fetch/。它非常基础，模型（Event），集合（Events）和视图（EventView）。该集合位于http://api.interr0bang.net/calendar/events，并返回已使用jsonformatter.curiousconcept.com验证的JSON数组。

以下是代码：

$(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请求，状态为200 OK，但响应正文为空...为什么不起作用？

Answer 1

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

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

Answer 2

我目前从您发布的两个网址中收到错误。

http://interr0bang.net/7357/fetch/ = 404
http://api.interr0bang.net/calendar/events =无法访问

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

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

$(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并更新视图。

Answer 3

即使在子域之间也无法进行跨域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协议，适用于大多数现代浏览器。

以下是另一个关于CORS的Stack Overflow答案，解释了它的工作原理： JSONP and Backbone.js

Answer 4

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

您可以覆盖Backbone.js同步工作： Using JSONP with Backbone.js

使用JSON获取Backbone.js集合

4 个答案: