使用骨干提取检索列表

Question

我是Backbone.js的新手，觉得我必须缺少一些非常基本的东西。我想了解如何设置可以检索数据的模型/集合。为此，我正在实例化一个模型/集合，然后立即调用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(); 
}); 

这里是控制台输出，这对我来说似乎表明，没有记录是从取（）调用检索：

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），所以不应该有任何跨域问题。

以下是一些邮递员致电https://mydomain/mycontextdir/carousel.json的结果。 （实际结果集较长，但格式相同）：

{ 
    "records": [ 
     { 
      "properties": [ 
       { 
        "name": "pDefaultCatgroupID", 
        "value": "1000357" 
       }, 
       { 
        "name": "highPriceFormatted", 
        "value": "$7.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取回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); 
    }); 

下面是从获取一个jsbin