JSFiddle - React, Tailwind, and code Playground

by Benmonro

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/x-handlebars" name="application" data-template-name="application">
    <br/>
    <div>{{controller.text}}</div>
    <button class="btn gray_button popoverButton">Click me</button>
    {{view Popover templateName="popover-content" parentSelector=".popoverButton" contentSelector="#popover-content" }}
</script>

<script type="text/x-handlebars" name="application" data-template-name="popover-content">
    <div id="popover-content" style="display:none" >
        {{view Ember.TextField valueBinding="controller.text"}}    
    </div>
</script>

JavaScript

Popover = Ember.View.extend({
            parentSelector: '',
            contentSelector: '',
            didInsertElement: function () {
                var self = this;
                $(self.parentSelector).popover({
                    html: true,
                    title: self.title,
                    placement: 'right',
                    content: function() {
                        var $content = $(self.contentSelector);
                        return $content.html();
                    }
                });
            },
            close: function() {
                $(this.parentSelector).popover('hide');
            }
        });

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    content: null,
    text: 'hello world'
});