svizzari/jsbin.robit.html

## jsbin.robit.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdn.jsdelivr.net/emberjs/1.5.0/ember.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <script type="text/x-handlebars">
    {{view "App.DropdownView" optionsBinding="App.options"}}
  </script>
</body>
</html>

## jsbin.robit.js
var App = Ember.Application.create();

App.options = [{label:'foo'},{label:'bar'}];


App.DropdownView = Ember.ContainerView.extend({
  options: null,
  open: false,
  selected: Ember.computed.defaultTo('options.firstObject'),
  classNames: 'dropdown'.w(),
  childViews: 'buttonView menuView'.w(),

  actions: {
    toggleMenu: function() {
      this.set('open', !this.get('open'));
    },

    selectItem: function(option) {
      this.set('selected', option);
      this.set('open', false);
    }
  },

  buttonView: Ember.View.create({
    template: Ember.Handlebars.compile('<a href="#" {{action "toggleMenu" target="view.parentView"}}>{{view.parentView.selected.label}}</a>')
  }),

  menuView: Ember.CollectionView.create({
    tagName: 'ul',
    classNames: 'dropdown-menu'.w(),
    contentBinding: 'parentView.options',
    isVisibleBinding: 'parentView.open',

    itemViewClass: Ember.View.extend({
      template: Ember.Handlebars.compile('<a href="#" {{action "selectItem" view.content  target="view.parentView.parentView"}}>{{view.content.label}}</a>{{#if view.active}}<span class="glyphicon glyphicon-ok"></span>{{/if}}'),
      active: function() {
        return this.get('parentView.parentView.selected') === this.get('content');
      }.property('parentView.parentView.selected')
    })
  })
});

## jsbin.robit.less
.dropdown {
  li {
    position: relative;
    .glyphicon-ok {
      position: absolute;
      right: 10px;
      top: 5px;
    }
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
	<script src="//cdn.jsdelivr.net/emberjs/1.5.0/ember.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<script type="text/x-handlebars">
	{{view "App.DropdownView" optionsBinding="App.options"}}
	</script>
	</body>
	</html>
	var App = Ember.Application.create();

	App.options = [{label:'foo'},{label:'bar'}];


	App.DropdownView = Ember.ContainerView.extend({
	options: null,
	open: false,
	selected: Ember.computed.defaultTo('options.firstObject'),
	classNames: 'dropdown'.w(),
	childViews: 'buttonView menuView'.w(),

	actions: {
	toggleMenu: function() {
	this.set('open', !this.get('open'));
	},

	selectItem: function(option) {
	this.set('selected', option);
	this.set('open', false);
	}
	},

	buttonView: Ember.View.create({
	template: Ember.Handlebars.compile('<a href="#" {{action "toggleMenu" target="view.parentView"}}>{{view.parentView.selected.label}}</a>')
	}),

	menuView: Ember.CollectionView.create({
	tagName: 'ul',
	classNames: 'dropdown-menu'.w(),
	contentBinding: 'parentView.options',
	isVisibleBinding: 'parentView.open',

	itemViewClass: Ember.View.extend({
	template: Ember.Handlebars.compile('<a href="#" {{action "selectItem" view.content target="view.parentView.parentView"}}>{{view.content.label}}</a>{{#if view.active}}<span class="glyphicon glyphicon-ok"></span>{{/if}}'),
	active: function() {
	return this.get('parentView.parentView.selected') === this.get('content');
	}.property('parentView.parentView.selected')
	})
	})
	});
	.dropdown {
	li {
	position: relative;
	.glyphicon-ok {
	position: absolute;
	right: 10px;
	top: 5px;
	}
	}
	}