Demonstrates a parent -> child view class

In answer to http://stackoverflow.com/questions/22048123

by Jon Beebe

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>    

<script type="text/tpl" id="view-tpl">
    <div class="tile">
        <button class="btn share-btn1">Show Hidden Content</button>
        <div class="share-tools1" style="display: none;">
            here is the hidden content&hellip;
        </div>    
    </div>
</script>

JavaScript

var NS = {
    Views: {}
};

NS.Views.View = (function () {
    var View = Backbone.View.extend({
        template: _.template($('#view-tpl').html()),
        
        render: function () {
            this.$el.append(this.template());
            return this;
        },
        
        // Make it clear that these are the same element.
        // Ensure they will not both fire by making them exclusive.
        events: {
            'mousedown .share-btn1:not(.hide)' : 'show',
            'mousedown .share-btn1.hide' : 'hide'
        },
        
        'show' : function (e) {
            console.log('show');
            var $e = $(e.currentTarget);
            $e.closest('.tile').find('.share-tools1').fadeIn('fast', function () {
                $e.addClass('hide');
                $e.text('Hide Content');
            });
        },
        
        'hide' : function (e) {
            console.log('hide');
            var $e = $(e.currentTarget);
            $e.closest('.tile').find('.share-tools1').fadeOut('fast', function () {
                $e.removeClass('hide');
                $e.text('Show Hidden Content');
            });
        }
    });
    return View;
})();

NS.Views.View2 = (function () {
    var View2 = NS.Views.View.extend({
        events: _.extend({},NS.Views.View.prototype.events,{
            'mousedown .share-btn1.hide' : 'hide2'
        }),
        hide2: function (e) {
            console.log('hide2');
            NS.Views.View.prototype.hide.apply(this, [e]);
        }
    });
    return View2;
})();

var view = new NS.Views.View2();
$('body').append(view.render().el);