我不能让Backbone.js的事件触发时，视图是一个的fancybox内 [英] I can't get Backbone.js events to trigger when the View is within a Fancybox

问题描述

我有一个骨干视图中的fancybox内呈现。我可以点击一个锚标记，它会工作，但在骨干网查看事件不会触发。我已经与太极拳，而且我不记得另一个收藏夹同样的问题。有什么想法？

  VAR LightboxItemView = Backbone.View.extend（{
    产品类别：'lighbox项目'，    事件：{
        点击.lightbox- preVIEW：visitItemPage
    }，    初始化：功能（）{
        _.bindAll（这一点，渲染）;
        this.render（）;
    }，    visitItemPage：功能（）{
        的console.log（'访问时间'）;
    }，    渲染：功能（）{
        VAR图形preVIEW = $（'＆LT; IMG＆GT;'）;
        图文preview.addClass（'lightbox- preVIEW'）;
        图文preview.attr（'src'中，this.model.get（'url_m'））;        VAR lbContent = $（'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;'）;
        lbContent.attr（ID，LB+ this.model.get（'身份证'））;
        lbContent.append（图形preVIEW）;        VAR lbHider = $（'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;'）;
        lbHider.css（显示，无）;
        lbHider.append（lbContent）;        $（this.el）.append（lbHider）;
        返回此;
    }
}）;
 

解决方案

我同意迪拉说，但我不认为规则出你继续使用的骨干事件处理。为什么不直接扎到的fancybox一个div周围的div是EL的看法？

我已经成功地得到这个在上班的jsfiddle除了它一直无法加载无论是Backbone.js的或的fancybox code远程。因此，它使一个pretty坏榜样，除非你愿意重新装入五六次。将code到一个网页，拥有所有这些文件包括，我保证，它会工作虽然，我实际测试吧：

这里是HTML：

 ＆LT; D​​IV的风格=显示：无＆GT;
  ＆LT; D​​IV ID =popupView＆GT;
    这是的fancybox一些示例东西。
    它可能已经由模板生成一样容易。
    ＆LT;一个ID =clickMe＆gt;点击此处＆lt;！/ A＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆所述p为H.;
  ＆LT;一个ID =popupTrigger属的href =＃popupView＆GT;
    弹出包含结果℃的的fancybox; / A＆GT;
＆所述; / P＆GT;
 

和这里的JavaScript来去用它：

  $（文件）。就绪（函数（）{
    VAR TestView = Backbone.View.extend（{
        EL：#popupView        事件：{
            点击#clickMe：clickMe
        }，        clickMe：功能（）{
            警报（你点击它你似乎喜欢那种类型！）;
        }
    }）;    VAR视图=新TestView（{
        厄尔尼诺：#popupView
    }）;    view.render（）;
    $（＃popupTrigger属）的fancybox（）;
}）;
 

注：此code ++工程，尽管有不被额外包装的任何地方。您可以在视图中的的fancybox中的链接及相应的code点击就会触发。

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

解决方案

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.

这篇关于我不能让Backbone.js的事件触发时，视图是一个的fancybox内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！