Использовать Backbone fetch для извлечения списка

Question

Я новичок в Backbone.js и чувствую, что мне не хватает чего-то очень простого. Я пытаюсь понять, как создать модель/коллекцию, которая может извлекать данные. С этой целью я создаю модель/коллекцию, а затем сразу вызываю fetch(), чтобы заполнить ее (я знаю, что начальная загрузка первого вызова - лучшая практика, но я просто хочу понять fetch() прямо сейчас). Модель образца, которую я создал, инициирует сетевой вызов службе RESTful, но после вызова выборки он остается в состоянии ожидания, а мой обратный вызов успеха в вызове выборки никогда не достигается, поэтому модель никогда не получает никаких данных.

Вот мой 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