使用Backbone.js进行获取和解析的问题

Question

I try to fetch this server: http://cshosting.webfactional.com/api/v1/projects/?format=json to a backbone.js collection. Then I try to console.log it, but it's not working. It is very important to me, please help.

NEWS: I figured out it's something with JSONP. will be glad to hear more information about that. thanks.

this is parts of my code in short:

window.ProjectList = Backbone.Collection.extend({

    model: Project,

    url:"http://cshosting.webfactional.com/api/v1/projects",

    parse: function(response) {
         return response.objects;
  }


});

another part:

window.HomeView = Backbone.View.extend({

    initialize:function () {
        this.projectList = new ProjectList();
        this.projectList.fetch({success : function() {console.log(this.projectList);    }});


        this.homeListView = new HomeListView({model: this.projectList});
    }

});

Answer 1

The this on the fetch callback is not going to refer to your HomeView instance. Try using another variable to ensure you are referencing the desired object.

initialize:function () {
    var self = this;
    this.projectList = new ProjectList();
    this.projectList.fetch({success : function() {console.log(self.projectList);    }});


    this.homeListView = new HomeListView({model: this.projectList});
}

If that doesn't solve the problem, please describe what happens. Use the webkit inspector's network tab to make sure the correct GET request and response are being called. Make sure your parse function is being called and the response object is what you expect.

Answer 2

It seems like you would want to do something more like this:

window.Project = Backbone.Model.extend({
url:"http://cshosting.webfactional.com/api/v1/projects/?format=json" 

}); 

window.ProjectList = Backbone.Collection.extend({

model: Project,
url:"http://cshosting.webfactional.com/api/v1/projects/?format=json"

});

window.HomeView = Backbone.View.extend({

initialize:function () {
    _.bindAll(this, 'render');
},

render: function(){
    var self = this;
    console.log(self.collection);
    return this; 
}

});

var project = new Project();
var collection = new ProjectList();
collection.fetch({
        success: function(result_collection, resp) {
            var view = new HomeView ({  collection: result_collection });
            view.render();
        }
 });