JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js" type="text/javascript"></script>

<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.3.js" type="text/javascript"></script>


<script data-template-name="application" type="text/x-handlebars">

    My Special Collection
    {{#collection App.MyCollectionView contentBinding="items" tagName="ul" popoverTemplateName='popover'}}
      {{name}}
    {{/collection}}

</script>

<script data-template-name="popover" type="text/x-handlebars">
    <button {{action edit this}}>Edit Me</button>
</script>

CSS

div {
    outline: 1px solid red;
}

.selected {
    color: green;
}

JavaScript

App = Ember.Application.create();

/** Views */

/** Controllers */
App.ApplicationController = Ember.Controller.extend({
    items: [ {name: 'item1'}, {name: 'item2'}, {name: 'item3'} ]
});

App.MyCollectionView = Ember.CollectionView.extend({
    
    childViews: ['popover'],
    
    init: function() {
        this.set( 'popover', Ember.View.extend({
            templateName: this.get("popoverTemplateName")
        }));
        this._super();
    },
    
    
});