Backbone.js initialise script after change html

Question

I use backbone.js with jquery-template. So I have view:

 var CarpetView = Backbone.View.extend({

            render: function(){
                var html = $("#carpet_designs").tmpl(this.model.toJSON())
                $(this.el).html(html);            
 });

Init view:

 this.view = new CarpetView({ model:element});
 this.view.render();
 $('#dm_'+row).html(this.view.el);

ОК,in my template I have gallery: for example:

<a rel="gallery_group" id="gallery_fancybox"  href="/uploads/gallery/${p_im}"> <img src="/uploads/gallery/thumbnails/thumb_${p_im}" /></a>

Than I have fancybox script:

 $("a#gallery_fancybox").fancybox({'overlayOpacity': 0.4});
 $("a[rel=gallery_group]").fancybox();

Question:

How and where I can initialise my fancybox script,that it work with my image?

Thank you!

Answer 1

I would pass the final element to the view and initialize the fancybox in the render. Something like this

var CarpetView = Backbone.View.extend({
    render: function(){
        var html = $("#carpet_designs").tmpl(this.model.toJSON())
        $(this.el).html(html);

        $(this.el).find("a#gallery_fancybox").fancybox({'overlayOpacity': 0.4});
        $(this.el).find("a[rel=gallery_group]").fancybox();
    }
});

var el='#dm_'+row;
this.view = new CarpetView({model:element, el:el});
this.view.render();