使用JSON提取Backbone.js集合

a0zr77ik 于 2022-11-10 发布在其他

关注(0)|答案(4)|浏览(186)

我正在使用Backbone.js和Phil Sturgeon的CI休息服务器（非常棒的工具，绝对推荐）。
页面找不到了！http://interr0bang.net/7357/fetch/。它是非常基本的，一个模型（事件）、一个集合（事件）和一个视图（事件视图）。集合位于http://api.interr0bang.net/calendar/events，返回一个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请求，状态为200 OK，但响应主体为空......为什么这不起作用？

backbone.js

来源：https://stackoverflow.com/questions/7266038/backbone-js-collection-fetching-with-json

4条答案

按热度按时间

pjngdqdw1#

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

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

赞(0）回复(0）举报 2022-11-10

lrl1mhuk2#

我目前从你张贴的两个URL中得到错误。
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并更新视图。

赞(0）回复(0）举报 2022-11-10

edqdpe6u3#

您不能进行跨域 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的堆栈溢出问题答案，解释了它的工作原理：JSONP和 Backbone 网.js

赞(0）回复(0）举报 2022-11-10

zed5wv104#

您应该使用JSONP hack通过跨域获取JSON数据。
您可以覆盖Backbone.js sync以进行工作：****

赞(0）回复(0）举报 2022-11-10