CODEWITHSUNDEEP
eventsbackbone.jsimageonload
Arno
Arno

Reputation: 514

Backbone.js view img onload

I'm struggling with backbone.js. I'm pretty new to js and used to as3 what is more object orientated

I try to make an simple image gallery with backbone. I load 100 images and i want them to fade in if they are loaded.

I have this in my AppView. For every image url I get i create one PhotoView

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

In the Photoview I use this code to attach the onload() on the img tag (found 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;
}

The problem is that in the img_loaded() i get the same view over and over (the last view). Anyone know how to keep reference to the right view

Upvotes: 3

Views: 3100

Answers (2)

Gaurang Jadia
Gaurang Jadia

Reputation: 1516

You can pass referance of view to call back function like this.

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

Upvotes: 0

freejosh
freejosh

Reputation: 11383

Pass this as an argument to img_loaded, so that you'll get a reference to the image that just loaded, and manipulate it however you want.

Since you didn't post the code for the img_loaded function I'm not sure if you're trying to fade them in one at a time as each is loaded (a simple job once you pass in the image reference), or wait until they're all loaded and fade them all in at once (would need some extra code for that).

Upvotes: 3

Related Questions