Simple starting point for Ember.js fiddles
HTML
<script src="https://raw.github.com/emberjs/ember.js/master/lib/ember.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/x-handlebars">
{{view "App.TestView" id="parentView"}}
</script>
<script type="text/x-handlebars" data-template-name="test">
{{#view categorySelect tagName="div" class="btn-group" classBinding="isOpen:open"}}
<a class="btn dropdown-toggle btn-small" {{action "dropdownToggle" on="click"}} href="#">
{{selected.title}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
{{#each content}}
<li {{bindAttr class="isActive:active"}}><a href="#" {{action "select" on="click"}}>{{title}}</a></li>
{{/each}}
</ul>
{{/view}}
</script>
CSS
#parentView{
margin:10px;
padding:70px;
background:#ffa;
}
JavaScript
var App = Ember.Application.create({});
App.TestView = Ember.View.extend({
templateName: 'test',
categorySelect: Ember.View.extend({
isOpen: false,
selected: Ember.Object.create({title: 'test0', value: ''}),
content:[
Ember.Object.create({title: 'test0', value: ''}),
Ember.Object.create({title: 'test1', value: ''}),
Ember.Object.create({title: 'test2', value: ''})
],
dropdownToggle: function(e){
this.toggleProperty('isOpen');
e.stopPropagation();
},
didInsertElement: function(){
var self = this;
$('body').on('click', function(){
self.set('isOpen', false);
});
},
select: function(e){
var selected = e.context;
this.content.setEach('isActive', false);
this.set('selected', selected);
selected.set('isActive', true);
this.set('isOpen', false);
}
})
});