覆盖backbone.js中的同步函数时，如何处理服务器响应

Question

我一直在尝试将我的backbone.js应用程序连接到现有的Codeigniter API。我在github上查看了todos示例，并从那里开始构建。我覆盖了findAll函数，该函数在“读取”时被调用，并试图获取页面并将其返回给fetch函数：

同步:findAll(){console.log(‘findAll- 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"]);
    }
});

}

接口返回如下内容-通过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"
        }
    ]
}

但随后console.debug("response.pages"，response"pages")打印出"undefined“。它为什么要这么做？

提前谢谢你！

谢谢你的回答。我可以在模型中执行ajax调用，这一点非常有用。问题是，我正在尝试将多个页面放入一个PageList集合中：

$(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;
});

所以在appview intitialize函数中，我调用

Pages.fetch();

这将填充所有页面并更新视图。我真的不确定如何在模型本身中做到这一点？

Answer 1

我认为您的问题在于如何使用$.ajax()中的success函数：

$.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"]);
    }
});

如果在AJAX调用中从success函数返回一些内容，它将直接进入bitbucket。_.values()不会去任何地方。从$.ajax()调用中得到的是一个promise，仅此而已。该promise稍后可以附加.done()、.fail()等，也可以与.when()一起使用或用于其他目的。但是，它与稍后将调用的成功函数无关。这等同于只附加到promise上一个.done()函数。

我的猜测是，您真正想要的是让AJAX完成，然后操作结果，然后在模型上设置它们。

不过，通常情况下，试图强制Backbone同步并不是它应该使用的方式。即使您不打算使用内置在Backbone中的Sync并跳过fetch、save等操作，它仍然可以很好地适应这样的调用(请注意，模型将在更新时更新，就像您正在执行fetch一样)：

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

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

Answer 2

尝试将此内容添加到您的PageList Backbone集合中：

  parse: function(response) {
    return response.pages
  }

这会做两件事：

1. 在响应中使用.pages引用pages数组。根据我从您的代码中可以看出，backbone使用整体对象响应来确定您的collection.
2. Tells backbone中的对象，以使用pages数组来实例化集合中的模型。它通过重写本机parse方法并返回您真正需要的(页面数组)

来实现这一点

这样做可以将页面对象放入一个PageList集合中。这对我来说在类似的情况下也是有效的。希望它能帮上忙！

Answer 3

好了，我找出了这里到底出了什么问题。正如John Munsch在第一个回答中提到的，ajax请求并不完全正确。这实际上不是backbone的问题，而是我正在进行的ajax调用的问题。首先，我将其更改为json；其次，我在ajax调用外部创建了一个变量'pages‘，它可以记住响应并将其返回给synch函数：

findAll: function() {

    var url = "/folio/get/8";
    var pages;
    var postmethod = 'GET';

    $.ajax({
         type: postmethod,
         url: url,
         async: false,
         beforeSend: function(x) {
          if(x && x.overrideMimeType) {
           x.overrideMimeType("application/j-son;charset=UTF-8");
          }
     },
     dataType: "json",
     success: function(data){
         console.debug("data", data);
         console.debug("data.pages", data.pages);
         pages = data.pages;

     }
    });

    return pages;

},

非常感谢大家的帮助，我从你们的回答中学到了很多！