Ember Latest

The latest build of Ember.

by dylanjha

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
    {{drop-down}}
</script>
<script type="text/x-handlebars" id="components/drop-down">
  <h1>Drop Down</h1>
  <div>
   {{view App.TextField value=selectedName id='form-input' focus-in='open' focus-out='close'}}
    <div {{bind-attr class=':items visible:showItems:hideItems'}}>
      {{#each item in items}}
        <div class='item' {{action 'selectItem' item}}>
           {{ item.name }}
        </div>
      {{/each}}
    </div>
  </div>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

#form-input{
    width:200px;
    font-size:20px;
    padding:5px;
}

.showItems{
    display:block;
    opacity:1;
}
.hideItems{
    display:none;
   
}
.items{
    font-size:20px;
    -webkit-transition:opacity .2s ease;
    width:200px;
}
.item{
    color:#aaa;
    background:#f5f5f5; 
    padding:5px;
    width:100%;
}
.item:hover{
    color:#2b2b2b;
     background:#f1f1f1;   
}

JavaScript

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
});

App.TextField = Ember.TextField.extend({

  focusOut: function(evt) {
    this.sendAction('focus-out');
  },
  focusIn: function(){
    this.sendAction('focus-in');   
  }
});

App.DropDownComponent = Ember.Component.extend({
    selectedName: null,
    visible: false,
    items: [{id: 1, name: 'one'}, {id: 2, name: 'two'}],
    actions: {
        selectItem: function(item){
            alert('Selected ' + item.name);
            this.set('selectedName', item.name);
            this.set('visible', false);
        },
        open: function(){
            this.set('visible', true);
        },
        close: function(){
            this.set('visible', false);
        }
    }
});