2

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

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

}

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"]) 打印出“未定义”。为什么这样做？

提前非常感谢！

- - - - - - - - - - 编辑 - - - - - - - - - - -

感谢您的回答。我可以在模型中进行 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();

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

4

3 回答 3

1

Try adding this in your PageList Backbone Collection:

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

This does two things:

  1. Uses .pages to reference the pages array in your response. From what I can tell from your code, backbone is using the overall object response to determine the objects in your collection.
  2. Tells backbone to uses the pages array to instantiate the models in your collection. It does this by overriding the native parse method and returning what you really want (the pages array)

Doing this should get your page objects into one PageList collection. This has worked for me in a similar situation. Hope it helps!

于 2012-04-13T16:48:47.487 回答
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 可以在稍后附加 .done()、.fail() 等，它也可以与 .when() 一起使用以及用于其他目的。但是，它与稍后将调用的成功函数无关。这相当于只是附加到该承诺的 .done() 函数。

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

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

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

    $.ajax(....).done(
      function (results) {
        scope.set(results);
      }
    );
  }
});
于 2012-04-13T15:34:58.103 回答
0

好的，所以我找出了这里实际出了什么问题。正如 John Munsch 在第一个答案中提到的，ajax 请求不太正确。这实际上不是骨干网的问题，而是我正在进行的 ajax 调用。首先，我将其更改为 json，其次我在 ajax 调用之外创建了一个变量“pages”，它可以记住响应并将其返回给同步函数：

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;

},

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

于 2012-04-13T23:14:29.997 回答