Dropdown menu

by fangyang

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/0.9.8.1/ember-0.9.8.1.js"></script>
<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 dropdown" classBinding="isOpen:open"}}
                        <a class="btn dropdown-toggle btn-small" data-toggle="dropdown" 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');
        },
        select: function(e){
            var selected = e.context;
    
            this.content.setEach('isActive', false);
    
            this.set('selected', selected);
            selected.set('isActive', true);
    
            this.set('isOpen', false);
        }
    })
});