首页 文章

使用JSON获取Backbone.js集合

提问于
浏览 次
7

我正在使用Backbone.js和Phil Sturgeon的CI休息服务器（绝对值得推荐的AMAZING TOOL） .

这是我的页面：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，但响应正文为空...为什么这不起作用？

json backbone.js

4 回答

  • 6

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

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

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

    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 并更新视图 .

    回复于
  • 4

    您无法进行跨域Ajax调用，即使是在子域之间......所以基本上，您的浏览器，在域 interr0bang.net 上，阻止对域上的API的Ajax调用 api.interr0bang.net ...这就是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

    回复于
  • 0

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

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

    回复于

相关问题