为什么我的 backbone.js 集合没有加载正确的数据列表?

Why is my backbone.js collection not loading the correct list of data?

这是我的模型和集合定义:

let PhotoModel = Backbone.Model.extend({
    urlRoot: '/api/Photo',
    defaults: {
        id: "2",
        import_id: "1",
        original_filename: "",
        filename: "IMG_8199 - Version 2.jpg",
        aws_url: "https://s3.amazonaws.com/nakamoto.ca",
        aws_bucket: "nakamoto.ca",
        aws_s3_source_path: "source/2016/02/IMG_8199_-_Version_2.jpg",
        aws_s3_compressed_path: "compressed/2016/02/IMG_8199_-_Version_2.jpg_1600x1200",
        aws_s3_thumb_path: "thumb/2016/02/IMG_8199_-_Version_2.jpg_400x400",
        capture_date: "2016-02-27 18:45:02",
        upload_date: "2017-04-18 21:26:59",
        file_size: "2026722",
        width: "3264",
        length: "2448",
        camera_make: "Apple",
        camera_model: "iPhone 6 Plus",
        software: "Aperture 3.6",
        latitude: "45.225206",
        lat_ref: "N",
        longitude: "45.292572",
        lon_ref: "W",
        altitude: "0.000000",
        apple_note: "iPhone 6 Plus back camera 4.15mm f/2.2",
        iptc_headline: "",
        iptc_caption: "",
        iptc_credit: "",
        iptc_rating: "0",
        iptc_city: "",
        iptc_province_state: "",
        iptc_country: "",
        iptc_tags: "",
        favorite: "0",
        checksum: "4749e94d3eec7b6bf6a0136d8dc3457c",
        public_flag: "0",
        raw_exif: ""
    },

    parse: function(response_data) {
        return response_data.data;
    }
});

let PhotoCollection = Backbone.Collection.extend({
    url: '/api/Photo',
    model: PhotoModel,

    parse: function(response_data) {
        return response_data.data;
    }
});

这里是调用 /api/Photo 的输出(从 Chrome 检查员复制粘贴):

{model: null, id: null, request: "GET", status: 1,…}
model: null
id: null
request: "GET"
status: 1
message: "grabbed some records with: SELECT * FROM `photo` WHERE 1 LIMIT 1, 10"
count: 10
page: 1
per_page: 10
data: [{id: "2", import_id: "1", original_filename: "", filename: "IMG_8199 - Version 2.jpg",…},…]
0: {id: "2", import_id: "1", original_filename: "", filename: "IMG_8199 - Version 2.jpg",…}
1: {id: "3", import_id: "1", original_filename: "", filename: "IMG_8192 - Version 2.jpg",…}
2: {id: "4", import_id: "1", original_filename: "", filename: "IMG_7961 - Version 2.jpg",…}
3: {id: "5", import_id: "1", original_filename: "", filename: "IMG_8086 - Version 2.jpg",…}
4: {id: "6", import_id: "1", original_filename: "", filename: "IMG_7947 - Version 2.jpg",…}
5: {id: "7", import_id: "1", original_filename: "", filename: "IMG_8113 - Version 2.jpg",…}
6: {id: "8", import_id: "1", original_filename: "", filename: "IMG_8009 - Version 2.jpg",…}
7: {id: "9", import_id: "1", original_filename: "", filename: "IMG_8109 - Version 2.jpg",…}
8: {id: "10", import_id: "1", original_filename: "", filename: "IMG_7967 - Version 2.jpg",…}
9: {id: "11", import_id: "1", original_filename: "", filename: "IMG_8004.jpg",…}

这是我的测试代码:

    $(function() {
        var photo_album = new PhotoCollection();
        photo_album.fetch({
            success: function (photo_album, response) {
                photo_album.each(function(photo, index, all) {
                    console.log(photo.get('filename'));
                });
            }
        );}
    };

当我查看控制台时,我看到相同的文件名重复了 10 次,这是我的照片模型的默认文件名(IMG_8199 - 版本 2.jpg)。根据 /api/Photo(上文)返回的数据,我希望看到 10 个不同的文件名。

谁能告诉我哪里错了?我觉得这一定很明显 - 这是我第一次尝试 backbone.js。

如果我在集合的 Parse 方法中记录 response_data.data,我会从 json 数据中看到正确的数据数组。

顺便说一句,我能够毫无问题地成功加载单个照片模型。

任何帮助将不胜感激,谢谢!

来自 0.9.9

的更改日志

After fetching a model or a collection, all defined parse functions will now be run. So fetching a collection and getting back new models could cause both the collection to parse the list, and then each model to be parsed in turn, if you have both functions defined.

由于来自服务器的正确响应结构,您的个人模型提取可能会成功,但传递给模型 parse 的集合提取响应只是一个像这样的对象:

{id: "3", import_id: "1", original_filename: "", filename: "IMG_8192 - Version 2.jpg",…}

没有 data 属性,所以

parse: function(response_data) {
    return response_data.data;
}

在模型中将 return undefined,在新创建的模型中保留默认值。您必须更新模型解析以处理这两种情况