javascript - 覆盖 backbone.js 中的同步功能时如何处理服务器响应

Question

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

查找全部:函数(){ console.log('同步 - 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"]);
    }
});

API 返回如下内容 - 通过 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 初始化函数中

Pages.fetch();

填充所有页面并更新 View 。我不太确定如何在模型本身内做到这一点？

Answer 1

我认为你的问题是你如何使用 $.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"]);
    }
});

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

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

但总的来说，试图强制 Backbone 同步并不是它的本意。即使您不打算使用 Backbone 内置的 Sync 并跳过获取、保存等操作，它仍然很乐意像这样被调用(请注意，模型只会在更新时更新，就像您在做获取):

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

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