How can I re-render a specific element with backbone.js(or maybe do not need it) after whole page been loaded?

Question

Say my page has loaded successfully. There is an img element in the document like this:

<div class="pro_list_imgbox">
    <img src="http://XXXX.com/bazinga.jpg" />
</div>

And I have backbone.js code like this:

events: {
        'click .pro_list_imgbox': 'loadPic',
    },

loadPic: function (e) {
        var target = $(e.target),
            pic = target[0].nodeName === 'IMG' ? target : target.find('img');

        if (!pic.data('loadState')) {
            pic.attr('src', pic[0].src += '?t' + new Date().getTime());
        }

    },

My question is how can I re-render this img element after I clicked it? Will my loadPic function works? with a random num as suffix of src And maybe something else I should do?

Answer 1

Looks like you're retrieving your image from a back-end controller, and that image is tagged according to the DateTime recorded upon retrieval.

To retrieve the same image, you'd have to save the source you used to retrieve that image. Given the code you already have, I'd say the most immediate answer would be to store the image source in the <img> element for the image, using $.data(), like this

loadPic: function (e) {
  var target = $(e.target),
  pic = target[0].nodeName === 'IMG' ? target : target.find('img');

  if (!pic.data('loadState')) {
    var picSource = pic[0].src += '?t' + new Date().getTime();
    pic.data({ source: picSource });
    pic.attr('src', picSource);
  }
}

The <img> element that was clicked will now have the last source string for that image and can be recalled using

var imageSource = $('img-selector').data(source);