当视图位于 Fancybox 内时，我无法触发 Backbone.js 事件

Question

我有一个在 Fancybox 中渲染的主干视图。我可以单击锚标记，它会起作用，但主干视图中的事件不会触发。我对 ShadowBox 和另一个我不记得的灯箱也有同样的问题。有什么想法吗？

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;
    }
});

Answer 1

Lightbox 库将您的元素从您在 DOM 中插入的位置移动。他们通常会创建一个新容器，将元素放入其中，然后将容器显示在其他所有内容之上。

首先，使用 Firebug 或浏览器中的检查器来查看该库的具体功能。然后，您可以使用 jQuery 中的普通事件处理程序来使其工作 http://api.jquery.com/bind/ 。

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

主干事件不起作用，因为该元素不再位于主干视图的 el 内。

Answer 2

我使用 Facebox 来实现类似的灯箱效果，但遇到了同样的问题。经过一些调试和切换内容后，事实证明事件委托确实有效，但您必须在触发 Facebox 后渲染视图。

就我而言，我有一个可重用的视图，在需要时隐藏/显示。我必须为另一个视图调用的 show() 方法执行此操作以显示：

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

本质上，如果您必须重新渲染视图，请在 Facebox/Lightbox 调用之后执行此操作，以便将事件正确委托给视图。

Answer 3

我同意 dira 所说的，但我认为这并不排除您继续使用 Backbone 事件处理。为什么不直接将 Fancybox 绑定到一个 div 周围的 div 上，该 div 是您的 View 的 el 呢？

我已经设法让它在 jsFiddle 中工作，只是它在远程加载 Backbone.js 或 Fancybox 代码时一直遇到问题。所以它是一个非常糟糕的例子，除非你愿意重新加载它六次。将代码插入到包含所有这些文件的页面中，我保证，它会工作，我已经实际测试过它：

这是 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>

这是与之配套的 JavaScript：

$(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();
});

注意：尽管没有，此代码仍然有效在任何地方都是额外的包装纸。您可以单击 Fancybox 中的链接，视图中的相应代码将会触发。