Question

I’ve been trying to connect my backbone.js application to an existing Codeigniter API. I looked at the todos example on github and built up from there.
I’m overriding the findAll function, which is invoked on ‘read’ and am trying to get the pages and return them back to the fetch function:

findAll: function() {
console.log(‘synch – findAll’);

var url = "/folio/get/8";
var data = ''; 

var postmethod = 'GET';

$.ajax({
    url : url,
    type : postmethod,
    async: false,
    data: data,
    success: function(response) 
    {
                    console.debug("response",response);
        console.debug("response.pages", response["pages"]);
        return _.values(response["pages"]);
    }
});

}

The API returns something like this – output via the console.debug(“response”, response):

{
    "id": "8",
    "facebook_id": "123456789",
    "title": "title",
    "access_date": null,
    "rating_avg": "0",
    "pages": [
        {
            "id": "6",
            "picture1": {
                "id": "3",
                "tag": "1",
                "tip": "Crazy",
                "facebook_picture_id": "1239102391023"
            },
            "picture2": "28",
            "picture3": "29",
            "picture4": null,
            "picture5": null,
            "picture6": null,
            "caption1": "caption 1",
            "caption2": "caption 2",
            "sequence": "2",
            "folio": "8",
            "ts": "2012-04-10 15:13:23",
            "template": "#page-template-2"
        },
        {
            "id": "5",
            "picture1": "24",
            "picture2": "25",
            "picture3": "26",
            "picture4": null,
            "picture5": null,
            "picture6": null,
            "caption1": "caption 1",
            "caption2": "caption 2",
            "sequence": "4",
            "folio": "8",
            "ts": "2012-04-10 15:13:23",
            "template": "#page-template-2"
        }
    ]
}

but then console.debug(“response.pages”, response[“pages”]) prints out “undefined”. Why does it do that?

Thanks a lot in advance!

——————– edit ———————

Thanks for your answer. The tip that I can just do ajax calls from within the model is really helpful. The thing is that I am trying to get several pages into one PageList Collection:

$(function(){
  // Page Collection
  // ---------------

  var PageList = Backbone.Collection.extend({

    model: Page,
    localStorage: new Store("wickes-backbone"), // this to get hold of my overwritten localstorage file - it is not actually a localStorage

    nextOrder: function() {
      if (!this.length) return 1;
      return this.last().get('order') + 1;
    },

    comparator: function(page) {
      return page.get('order');
    }

  });

  window.Pages = new PageList;
});

so within the appview intitialize function I am calling

Pages.fetch();

which populates all the pages and updates the view. I’m not really sure how to do that within the model itself?

Answer 1

I think your problem is how you’re using the success function in the $.ajax():

$.ajax({
    url : url,
    type : postmethod,
    async: false,
    data: data,
    success: function(response) 
    {
        console.debug("response",response);
        console.debug("response.pages", response["pages"]);
        return _.values(response["pages"]);
    }
});

If you return something from the success function on an AJAX call, it’s going straight into the bitbucket. That _.values() isn’t heading anywhere. What comes out of a $.ajax() call is a promise, that’s all. That promise can have .done(), .fail() etc. attached to it later, it can also be used with .when() and for other purposes. However, it has nothing to do with the success function it will call later. That’s equivalent to just a .done() function attached to that promise.

My guess is that what you really want is for AJAX to finish and then manipulate the results and then set them on the model.

In general though, trying to force Backbone to be synchronous is not how it’s meant to be used. Even if you don’t intend to use the Sync built into Backbone and skip the fetch, save, etc. it still happily accommodates being called like so (and note that the model will just update when it updates, just like you were doing a fetch):

var myModel = Backbone.Model.extend({
  goGetSomeData : function () {
    var scope = this;

    $.ajax(....).done(
      function (results) {
        scope.set(results);
      }
    );
  }
});