jquery - Backbone.js $.ajax 集合 init 内的成功回调不调用同一集合中的函数

Question

我尝试调用 loadPhotos，但收到一条错误消息，指出 loadPhotos 未定义。我尝试了 this.loadPhotos(); 但随后我收到一条错误消息，指出该对象没有这样的方法。我对此还很陌生，仍在尝试弄清楚什么可以访问什么等等，如果有人能指出我正确的方向，我将不胜感激。我做错了什么？

这是我的代码:

    Album = Backbone.Collection.extend ({
    model: Photo,
    url: "/api/",
    albumName: "",
    initialize: function(models, options){
        options || (options = {});
        if (options.title) {
            this.albumName = options.title;
        };

        $.ajax({
            type: "GET",
            url: this.url,
            data: "album=" + this.albumName,
            dataType: "json",
            success: function(data){
                console.log(data);
                loadPhotos(data); // <<< the problem is right here
            },
            error: function(jqXHR, textStatus, errorThrown){
                console.log("FETCH FAILED: " + errorThrown);
            }
        });

    },

    loadPhotos: function(filenames){
        for (var i = 0; i < filenames.length; i++ ){

            var photo = new Photo( {fileurl: filenames[i] });
            var photoView = new PhotoView( { model: photo} );
            this.add(photo);

        }


    }


});

Answer 1

您误解了作用域和 this 在 JavaScript 中的工作原理。

调用函数如

loadPhotos(data);

将在从成功回调到全局范围的各种范围内查找名为 loadPhotos 的函数，但不存在这样的函数，因为该函数已附加到您的集合实例。

this.loadPhotos(data)

更接近，但它完全取决于this引用的内容。 this 是 JavaScript 中的一个特殊关键字，它指向的对象取决于函数的调用方式。在您的情况下，this 完全取决于 jQuery 的行为。您想要使用对集合的引用。更容易知道变量引用对象的常用名称是 self、that，有时还有 _this。

实现此目的的一种方法是保存对引用该集合的外部 this 所指向的对象的引用。如果将其保存到变量中，它将正常工作。

initialize: function(models, options){
    // Stuff

    var self = this;

    $.ajax({
        type: "GET",
        url: this.url,
        data: "album=" + this.albumName,
        dataType: "json",
        success: function(data){
            console.log(data);

            // Call the function on the collection.
            self.loadPhotos(data);

        },
        error: function(jqXHR, textStatus, errorThrown){
            console.log("FETCH FAILED: " + errorThrown);
        }
    });

},

另一种选择是按照 @alnitak 的回答所述，并使用 context 属性显式传递正确的回调上下文。