JSFiddle - React, Tailwind, and code Playground

by dashk

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<a class="foo">Click Me</a>
<script type="text/template" id="contentViewTemplate">
    <div>
        <h1></h1>
        <button id="close-me">Close Me!</button>
    </div>
</script>

JavaScript

var MyPopoverView = Backbone.View.extend({
    template: _.template($('script#contentViewTemplate').text()),
    
    close: function() {
        this.popoverEl.popover('hide');
    },
    
    render: function(parentEl) {
        if (!parentEl) {
            throw new Error('parentEl must be provided to render.');
        }
        
        this.$el.html(this.template({}));
        
        if (parentEl) {
            var me = this;
            this.popoverEl = parentEl.popover({
                html: true,
                title: 'Hello',
                placement: 'bottom',
                content: function() {
                    return me.$el;
                }
            });
            
            // Have delegate events listened from popover's parent instead
            // of body.
            this.popoverEl.parent().delegate('button#close-me', 'click', _.bind(this.close, this));
        }
        
        return this;
    }
});

var containerView = new MyPopoverView();
containerView.render($('a.foo'));