Привязка событий кликается с помощью backbone.js & jQuery - PullRequest
Новая
       22

Привязка событий кликается с помощью backbone.js & jQuery

6 голосов
/ 30 января 2012

Мне нужно связать два события в моем backbone.js -обзоре, чтобы переключить меню. Идея состоит в том, что, если нажать кнопку с идентификатором #toggler, меню откроется, и любой щелчок вне элемента #menu скроет меню.

К сожалению, я не могу заставить это работать с привязкой событий магистрали без вызова outsideMenuHandler() при каждом щелчке независимо от того, щелкнул я по элементу #menu или нет.

Что я должен изменить, чтобы сделать эту работу?

Это то, что я сделал в backbone.js, который не работает должным образом: 

myView = Backbone.View.extend({

    events: {
        'click #menu': 'insideMenuHandler',
        'click':       'outsideMenuHandler'
    }

    insideMenuHandler: function(e) {}, // Called when clicking #menu
    outsideMenuHandler: function(e) {} // Called on every click both on and off #menu

}

Для справки, вот что я хотел бы сделать, используя только jQuery: 

$(document).click(function(event) {
    if ( $(event.target).closest('#menu').get(0) == null ) {
        $("#menu").slideUp();
    }
});

Ответы [ 2 ]

14 голосов
/ 31 января 2012

Есть несколько вещей, с которыми вам нужно разобраться.

Прежде всего, если ваш insideMenuHandler вернет false или вызовет e.stopPropogation(), тогда ваш outsideMenuHandler не будет вызван за кликина #menu.Например:

http://jsfiddle.net/ambiguous/8GjdS/

Но это не вся ваша проблема.Ваш outsideMenuHandler будет вызываться только за клики в вашем представлении;поэтому, если кто-то нажмет на страницу за пределами вашего просмотра, ваш outsideMenuHandler не будет вызван и ваше меню не будет закрыто.Если вы хотите, чтобы меню закрывалось, когда кто-то щелкает где-то за пределами #menu, вам придется вручную привязать к body и вручную отменить привязку, когда ваш вид уничтожен.Примерно так: 

var myView = Backbone.View.extend({
    events: {
        'click #menu': 'insideMenuHandler'
    },

    initialize: function() {
        _.bindAll(this, 'insideMenuHandler', 'outsideMenuHandler');
    },

    render: function() {
        // Both <body> and <html> for paranoia.
        $('body, html').on('click', this.outsideMenuHandler);
        // ...
        return this;
    },

    remove: function() {
        // Clean up after ourselves.
        $('body, html').off('click', this.outsideMenuHandler);
        // ...
    },

    // ...
    outsideMenuHandler: function(e) {
        // ...
        return false;
    }
});

и тогда обязательно правильно удалите свое представление.Например:

http://jsfiddle.net/ambiguous/MgkWG/1/

0 голосов
/ 31 января 2012

Проблема в том, что вы связываете свое событие с элементом DOM, который вы определяете как представления el. Так что, если это не window.document, как в вашем примере jquery, вы не можете заметить ни одного клика за их пределами. В вашем примере проще всего было бы добавить события вручную с помощью jquery, а не с помощью магистрали.

...