JSFiddle - React, Tailwind, and code Playground

by savid

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id="test_div"><a href="#">deactivate</a></div>

CSS

#test_div {
    width: 100px;
    height: 100px;
    background: #F00;
    border: 1px solid #000;
    margin: 50px;
    padding: 20px;
}

#test_div.active {
    background: #00F;
}

#test_div.hovering {
    background: #0F0;
}

#test_div a {
    display: none;
    color: #FFF;
    font-weight: bold;
}
#test_div.active a {
    display: inline;
}

JavaScript

TestView = Backbone.View.extend({
    el: '#test_div',
    events: {
        'mouseenter': 'hover',
        'click': 'activate',
        'a click': 'deactivate',
    },
    hover: function() {
        var _this = this;
        this.$el.addClass('hovering').on('mouseleave', function(){
            _this.$el.removeClass('hovering');
        });
    },
    activate: function() {
        // activating disables hover event
        this.$el.off('mouseenter');
        this.$el.removeClass('hovering').addClass('active');
    },
    deactivate: function() {
        console.log('deactivating');
        this.$el.removeClass('active');
        this.delegateEvents();
    }
});

v = new TestView;