Я не могу получить события Backbone.js для запуска, когда представление находится внутри Fancybox - PullRequest
Новая
       276

Я не могу получить события Backbone.js для запуска, когда представление находится внутри Fancybox

2 голосов
/ 24 октября 2011

У меня есть Backbone View, который отображается в Fancybox. Я могу нажать на метку привязки, и она будет работать, но события в представлении Backbone не сработают. У меня была такая же проблема с 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;
    }
});

Ответы [ 3 ]

2 голосов
/ 30 ноября 2011

Я использую Facebox для аналогичного эффекта лайтбокса и сталкиваюсь с той же проблемой.После некоторой отладки и переключения компонентов выясняется, что делегаты событий работают, но вы должны визуализировать свое представление ПОСЛЕ, когда вы запустили Facebox.

В моем случае у меня есть многоразовое представлениебыть скрытым / показывать когда нужно.Я должен был сделать это для метода show (), который был бы вызван другим представлением, чтобы показать: 

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

По сути, если вам нужно перерисовать ваше представление, сделайте это после вызова facebox / lightboxчто события правильно делегированы представлению.

2 голосов
/ 24 октября 2011

Библиотеки лайтбоксов перемещают ваш элемент от того места, куда вы вставили его в DOM. Обычно они создают новый контейнер, помещают ваш элемент внутрь, а затем отображают контейнер поверх всего остального.

Сначала, используйте Firebug или Inspector в вашем браузере, чтобы увидеть, что именно делает библиотека. Затем вы можете использовать обычные обработчики событий в jQuery, чтобы заставить его работать http://api.jquery.com/bind/.

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

События Backbone не работают, потому что элемент больше не находится внутри el.

вашего Backbone View.
1 голос
/ 24 октября 2011

Я согласен с тем, что сказал дира, но я не думаю, что это исключает продолжение использования обработки событий Backbone.Почему бы просто не привязать Fancybox к div, окружающему div, который является el для вашего View?

Мне удалось заставить это работать в 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, и соответствующий код в представлении сработает.

...