I can't get Backbone.js events to trigger when the View is within a Fancybox

问题

I have a Backbone View that renders within a Fancybox. I can click on an anchor tag and it will work but events in the Backbone view won't trigger. I've had the same problem with ShadowBox and another lightbox that I can't remember. Any thoughts?

var LightboxItemView = Backbone.View.extend({
    className : 'lighbox-item',

    events : {
        "click .lightbox-preview" : "visitItemPage"
    },

    initialize : function() {
        _.bindAll(this, "render");
        this.render();
    },

    visitItemPage : function() {
        console.log('visiting time');
    },

    render : function() {
        var graphicPreview = $('<img>');
        graphicPreview.addClass('lightbox-preview');
        graphicPreview.attr('src', this.model.get('url_m'));

        var lbContent = $('<div></div>');
        lbContent.attr("id", 'lb' + this.model.get('id'));
        lbContent.append(graphicPreview);

        var lbHider = $('<div></div>');
        lbHider.css("display", "none");
        lbHider.append(lbContent);

        $(this.el).append(lbHider);
        return this;
    }
});

回答1:

I agree with what dira said but I don't think that rules out your continuing to use the Backbone event handling. Why not just tie the Fancybox to a div surrounding the div that is the el for your View?

I've managed to get this to work in a jsFiddle except that it keeps having trouble loading either the Backbone.js or Fancybox code remotely. So it makes a pretty poor example unless you're willing to reload it half a dozen times. Insert the code into a page that has all of those files included and I promise, it will work though, I've actually tested it:

Here's the HTML:

<div style="display:none">
  <div id="popupView">
    This is some example stuff for the Fancybox. 
    It could have been generated by a template just as easily. 
    <a id="clickMe">Click Here!</a>
  </div>
</div>

<p>
  <a id="popupTrigger" href="#popupView">
    Popup a Fancybox containing the results</a>
</p>

And here's the JavaScript to go with it:

$(document).ready(function () {
    var TestView = Backbone.View.extend({
        el: "#popupView",

        events: {
            "click #clickMe": "clickMe"
        },

        clickMe: function () {
            alert("You clicked it! You seem like that type.");
        }
    });

    var view = new TestView({
        "el": "#popupView"
    });

    view.render();
    $("#popupTrigger").fancybox();
});

Note: This code works despite there not being extra wrappers anywhere. You can click on the link within the Fancybox and the appropriate code within the view will fire.

回答2:

Lightbox libraries move your element from where you inserted it in the DOM. They usually create a new container, put your element inside, and then display the container on top of everything else.

First, use Firebug or the Inspector in your browser to see what the library does exactly. Then, you can use normal event handlers in jQuery to make it work http://api.jquery.com/bind/.

initialize: function() {
  $('<your-element-in-the-overlay-box> a').click(handler)
}

Backbone events don't work because the element is no longer inside your Backbone View's el.

回答3:

I'm using Facebox for the similar lightbox effect and I run into the same issue. After some debugging and switching stuff around, it turns out that the event delegates does work, but you have to render your view AFTER when you have triggered the facebox.

In my case, I have a reusable view that is being hide/show when needed. I had to do this for the show() method that would be called by another view to show :

show: function(model) {
  $.facebox(this.el);
  // now render my element
  this.model = model;
  $(this.el).html( ... from template ... )
}

Essentially if you have to re-render your view, do it after the facebox/lightbox call so that the events are correctly delegated to the view.

来源：https://stackoverflow.com/questions/7869820/i-cant-get-backbone-js-events-to-trigger-when-the-view-is-within-a-fancybox

标签

javascript

backbone.js

fancybox

lightbox