backbone show popup

index.js

var App = Backbone.View.extend({
    el: $('#app'),

    popapStatus: 'hidden',

    initialize: function() {

        var popapView = new PopapView(),
            buttonView = new ButtonView();

        this.$el.append(buttonView.render().$el);
        this.$el.append(popapView.render().$el);

        this.listenTo(buttonView, 'showPopup', function(){
            popapView.showPopup();
            buttonView.disableButton();
        }.bind(this));

        this.listenTo(popapView,'hidePopup', function(){
            buttonView.enableButton();
        });

    }
});


var PopapView = Backbone.View.extend({
    template: '<div>Somepopup</div>',
    tagName: 'div',
    className: 'popup',

    events: {
        'blur': 'onBlur'
    },

    onBlur: function(){
        setTimeout(function(){ this.hidePopup();}.bind(this), 200)

    },

    showPopup: function(){
      this.$el.hide().fadeIn().focus();
    },

    hidePopup: function(){
        this.trigger('hidePopup');
        this.$el.hide();
    },

    render: function(){
        this.$el.hide();
        this.$el.attr({tabindex: 0});
        var template = _.template(this.template);
        this.$el.html(template);
        return this;
    }
});

var ButtonView = Backbone.View.extend({
    template: 'Show Popup',
    tagName: 'div',

    status: 'active',

    events:{
      'click': 'onClick'
    },

    enableButton: function(){
        this.$el.removeClass('active');
    },
    disableButton: function(){
        this.$el.addClass('active');
    },

    onClick: function(){
        if('active' == this.el.className){
            return;
        }
        console.log('ura!!!');
        this.disableButton();
        this.trigger('showPopup');
    },

    render: function(){
        var template = _.template(this.template);
        this.$el.html(template);
        return this;

    }
});

var app = new App();