Backbone.js视图img onload

Question

我在使用backbone.js时遇到了一些困难。我对js相当陌生，以前主要使用面向对象的as3。

我尝试使用backbone制作一个简单的图片库。我加载了100张图片，并希望在它们被加载后淡入显示。

在我的AppView中，针对每个图像URL，我创建了一个PhotoView。

var view = new PhotoView({model: photo, list:this.imageList});
this.imageList.append(view.render().el);

在 Photoview 中，我使用以下代码将 onload() 附加到 img 标签上（在此处找到：here）：

render: function() {
    var self = this;
    this.$el.append(some_html_with_img_elements);
    this.$el.find('img').on('load', function() { self.img_loaded() });
    return this;
}

问题在于在img_loaded()中，我一遍又一遍地获取相同的视图（最后一个视图）。有人知道如何保留对正确视图的引用吗？

- Arno

Answer 1

将this作为参数传递给img_loaded函数，这样您就可以获得刚刚加载的图像的引用，并按照您的意愿进行操作。由于您没有发布img_loaded函数的代码，我不确定您是想在每次加载时一个一个地淡入它们（一旦传递了图像引用，这是一项简单的工作），还是等到所有图像都加载完毕后再一起淡入它们（这需要一些额外的代码）。

- freejosh

---

你说得对。在复制代码的过程中，我也错过了一个小细节。我忘记在“var self = this”之前加上“var”。 - Arno

Answer 2

您可以像这样将视图的引用传递给回调函数。

var me = this;
me.$el.find("img").on("load", { me: me }, function (event) { event.data.me.img_loaded(); });

- Gaurang Jadia