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>Hello World</h1>
        <button id="close-me">Close</button>
    </div>
</script>

JavaScript

var PopoverContentView = Backbone.View.extend({
    template: _.template($('script#contentViewTemplate').text()),
    events: {
        'click h1': 'helloWorld',
        'click button#close-me': 'closeMe'
    },
    
    closeMe: function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        this.trigger('close');
    },
    
    render: function(parentEl) {
        this.$el.html(this.template({}));
        
        if (parentEl) {
            parentEl.append(this.$el);
        }
        
        return this;
    },
    
    helloWorld: function() {
        console.log('Hello World!');
    }
});

var PopoverContainerView = Backbone.View.extend({
    closePopover: function() {
        this.popoverEl.popover('hide');
    },
    
    render: function(parentEl) {
        if (!parentEl) {
            throw new Error('parentEl must be provided to render PopoverContainerView.');
        }
        // Creates content view
        this.contentView = new PopoverContentView({});
        
        // Listen to close event
        this.listenTo(this.contentView, 'close', this.closePopover);
        
        // Renders content view
        this.contentView.render(this.$el);
        
        if (parentEl) {
            var me = this;
            this.popoverEl = parentEl.popover({
                html: true,
                title: 'Hello',
                placement: 'bottom',
                content: function() {
                    return me.$el;
                }
            });
        }
        
        
        
        return this;
    }
});

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