我无法让Backbone.js事件在视图位于Fancybox中时触发

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

本文关键字：Fancybox 视图 Backbone 事件 js      更新时间：2023-09-26

我有一个骨干视图，在一个花式框内呈现。我可以点击一个锚标记，它将工作，但事件在骨干视图不会触发。我在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;
    }
});

Lightbox库将元素从DOM中插入的位置移动。它们通常会创建一个新的容器，把你的元素放进去，然后把这个容器显示在其他所有元素的上面。

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

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

骨干事件不工作，因为元素不再在骨干视图的el。

我正在使用Facebox进行类似的灯箱效果，我遇到了同样的问题。经过一些调试和切换的东西，事实证明，事件委托确实工作，但你必须渲染你的视图后，当你触发了facebox。

在我的例子中，我有一个可重用的视图，它在需要时被隐藏/显示。我必须为show()方法这样做，该方法将被另一个视图调用以显示:

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

本质上，如果你必须重新渲染你的视图，在facebox/lightbox调用之后进行，以便事件被正确地委托给视图

我同意dira所说的，但我不认为这就排除了继续使用Backbone事件处理的可能性。为什么不直接将Fancybox绑定到div周围的div，这是视图的el ?

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

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中的链接，视图中的相应代码将被触发。

相关文章：