Backbone.js $ .ajax成功回调在一个集合init内不调用同一个集合中的函数(Backbone.js $.ajax success callback inside a collectio

Backbone.js $ .ajax成功回调在一个集合init内不调用同一个集合中的函数(Backbone.js $.ajax success callback inside a collection init not calling a function from the same collection)

我正在尝试调用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); } } });

I'm trying to call loadPhotos, but I get an error saying that loadPhotos is not defined. I tried this.loadPhotos(); but then I get an error saying that the object doesn't have such a method. I'm pretty new at this and still trying to figure out what has access to what and such, and I'd greatly appreciate if someone could point me in the right direction. What am I doing wrong?

Here's my code:

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); } } });

最满意答案

您误解了JavaScript的范围和工作方式。

调用这个函数

loadPhotos(data);

将从您的成功回调到全局范围的各个范围中查找名为loadPhotos的函数，但由于函数附加到您的集合实例，因此不存在此类函数。

this.loadPhotos(data)

更接近，但完全取决于this是参考。 this是JavaScript中的一个特殊关键字，它指向的对象取决于函数的调用方式。 在你的情况下， this完全取决于jQuery的行为。 您想要使用对集合的引用。 通用名称使知道变量引用对象更容易，它们是self ，有时是_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属性显式地传递适当的回调上下文。

You are misunderstanding how scoping and this work in JavaScript.

Calling the function like

loadPhotos(data);

will look for a function called loadPhotos in the various scopes from your success callback up to the global scope, but no such function exists because the function is attached to your collection instance.

this.loadPhotos(data)

is closer however it entirely depends on what this is referencing. this is a special keyword in JavaScript and the object that it points at depends on how the function was called. In your case this depends entirely on the behavior of jQuery. You want to use a reference to the collection. Common names to make it easier to know that the variable references the object are self, that and sometimes _this.

The one way to do that is a save a reference to the object pointed to by the outer this that references the collection. If you save it into a variable, it will work fine.

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); } }); },

Another option is to do as @alnitak's answer says, and explicitly pass the proper callback context using the context attribute.