使用 Backbone fetch 检索列表

Question

我是 Backbone.js 的新手，觉得我一定缺少一些非常基本的东西。我试图了解如何设置可以检索数据的 model/collection。为此，我正在实例化一个 model/collection，然后立即调用 fetch() 来填充它（我知道引导第一次调用是最佳实践，但我现在只想了解 fetch()）。我创建的示例模型确实发起了对 RESTful 服务的网络调用，但是在 fetch 调用之后它仍然处于 Pending 状态，而我在 fetch 调用中的成功回调永远不会到达，所以模型永远不会得到任何数据。

这是我的js代码：

var MyProducts = Backbone.Collection.extend({
    url: contextPath + "/carousel.json"
});

var MyProductsCollection1 = Backbone.Collection.extend({
    urlRoot: contextPath + "/carousel.json",
    url: contextPath + "/carousel.json"
});

var MyProductsCollection2 = Backbone.Collection.extend({
    url: contextPath + "/carousel.json"
});

var MyView = Backbone.View.extend({

    render: function () {
        console.log('this.collection');
        console.log(this.collection);

        return this;
    }
})

var myProducts;
var myProductsCollection1;
var myProductsCollection2;

$(function () {
    myProducts = new MyProducts();
    myProducts.fetch({
        success: function (model) {
            var result = model.get("records");
        }
    });

    myProductsCollection1 = new MyProductsCollection1();
    myProductsCollection1.fetch({
        success: function (model) {
            var result = model.get("records");
        }
    });

    myProductsCollection2 = new MyProductsCollection2();
    myProductsCollection2.fetch({
        success: function (model) {
            var result = model.get("records");
        }
    });

    var myView1 = new MyView({ collection: myProductsCollection1 });
    var myView2 = new MyView({ collection: myProductsCollection2 });
    console.log('view1');
    myView1.render();
    console.log('view2');
    myView2.render();
});

这是控制台输出，在我看来这表明没有从 fetch() 调用中检索到任何记录：

view1
this.collection
child {length: 0, models: Array[0], _byId: Object}
view2
this.collection
hild {length: 0, models: Array[0], _byId: Object}

在“网络”选项卡中，有 3 个请求 carousel.json，但都显示 Status = pending，表明它们没有完成。

REST api 的域与网站的域相同（我正在调用 Spring 控制器来检索视图和这个 JSON），所以应该不是任何跨域问题）。

以下是 Postman 调用 https://mydomain/mycontextdir/carousel.json 的一些结果。（实际结果集较长，但格式相同）：

{
    "records": [
        {
            "properties": [
                {
                    "name": "pDefaultCatgroupID",
                    "value": "1000357"
                },
                {
                    "name": "highPriceFormatted",
                    "value": ".95"
                },
                {
                    "name": "REG_HIGH_PRICE",
                    "value": "7.950000"
                }
            ]
        },
        {
            "properties": [
                {
                    "name": "REG_LOW_PRICE",
                    "value": "13.950000"
                },
                {
                    "name": "pItemID",
                    "value": "1254778"
                }
            ]
        }
     ],
    "navigableFacets": null,
    "refinmentFacets": null,
    "breadcrumbs": [],
    "content": null,
    "totalRecords": 5868,
    "navigationPath": [],
    "searchReport": {
        "fault": {
            "hasFault": false,
            "faultCommandName": null,
            "faultCode": null,
            "faultStatus": null,
            "faultMessageKey": null,
            "faultMessage": null,
            "errors": null
        },
        "commerceId": null,
        "loggedInCommerce": false,
        "terms": null,
        "autoSuggestion": null,
        "profanity": false
    }
}

我做错了什么导致无法检索数据？

非常感谢您的协助！

Answer 1

您似乎混淆了从 Model for the fetch from a Collection 获取的内容（请注意传递给成功回调的参数的差异）。当您在集合上调用 fetch 时，该集合期望返回一个模型数据数组，如果您的数据不符合该格式，您可以覆盖它的解析函数来处理数据。由于您的 json 实际上是一个对象而不是数组，因此您需要自己解析它。

所以在你的情况下你想要做的是

var MyProducts = Backbone.Collection.extend({
    url: contextPath + "/carousel.json",
    parse: function (data) {
      return data.records;
    }
});


var myProducts = new MyProducts();
myProducts .fetch({
  success: function (collection, response, options) {
    alert(collection.length);
  });

这是 link 到 jsbin

使用 Backbone fetch 检索列表

Use Backbone fetch to retrieve list

javascript

rest

json

backbone.js